<!doctype html>
<!--
  Copyright 2019 Jason Ertel (jertel). All rights reserved.
  Copyright 2020-2023 Security Onion Solutions, LLC. All rights reserved.

  This program is distributed under the terms of version 2 of the
  GNU General Public License.  See LICENSE for further details.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-->

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="mask-icon" href="images/favicon/onion.svg?v=VERSION_PLACEHOLDER">
    <link rel="alternate icon" class="so-favicon" type="image/png" href="images/favicon/onion.png?v=VERSION_PLACEHOLDER">
    <link rel="icon" class="so-favicon" type="image/svg+xml" href="images/favicon/onion.svg?v=VERSION_PLACEHOLDER">
    <link rel="stylesheet" href="css/external/vuetify-v2.6.5.min.css">
    <link rel="stylesheet" href="css/external/all-6.1.1.min.css">
    <link rel="stylesheet" href="css/external/daterangepicker-3.14.1.css">
    <link rel="stylesheet" href="css/app.css?v=VERSION_PLACEHOLDER">
    <title>Security Onion</title>
  </head>
  <body style="background-color: #242424;">
    <v-app id="app" style="display:none" :key="timestamp">
      <v-navigation-drawer v-model="toolbar" width="200" clipped overflow app>
        <v-list dense>
          <v-list-item @click="" to="/">
            <v-list-item-action>
              <v-icon>fa-home</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title v-text="i18n.home"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item @click="" to="/alerts">
            <v-list-item-action>
              <v-icon>fa-bell</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title v-text="i18n.alerts"></v-list-item-title>
            </v-list-item-content>
            <v-list-item-icon v-if="isNewAlert()">
              <v-icon color="warning">fa-exclamation</v-icon>
            </v-list-item-icon>
          </v-list-item>
          <v-list-item @click="" to="/dashboards">
            <v-list-item-action>
              <v-icon>fa-chart-pie</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title v-text="i18n.dashboards"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item @click="" to="/hunt">
            <v-list-item-action>
              <v-icon>fa-crosshairs</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title v-text="i18n.hunt"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item @click="" to="/cases" v-if="casesEnabled">
            <v-list-item-action>
              <v-icon>fa-briefcase</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title v-text="i18n.cases"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item @click="" to="/jobs">
            <v-list-item-action>
              <v-icon>fa-stream</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title v-text="i18n.jobs"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item @click="" to="/grid">
            <v-list-item-action>
              <v-icon>fa-network-wired</v-icon>
            </v-list-item-action>
            <v-list-item-content> 
              <v-list-item-title v-text="i18n.grid"></v-list-item-title>
            </v-list-item-content>
            <v-list-item-icon v-if="isGridUnhealthy()">
              <v-icon color="warning">fa-exclamation</v-icon>
            </v-list-item-icon>
          </v-list-item>
          <v-list-item @click="" to="/downloads">
            <v-list-item-action>
              <v-icon>fa-download</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title v-text="i18n.downloads"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-group :value="false" prepend-icon="fa-shield-alt">
            <template v-slot:activator>
              <v-list-item-title v-text="i18n.admin"></v-list-item-title>
            </template>
            <v-list-item @click="" to="/users">
              <v-list-item-icon>
                <v-icon>fa-users</v-icon>
              </v-list-item-icon>
              <v-list-item-title v-text="i18n.users"></v-list-item-title>
            </v-list-item>
          </v-list-item-group>
        </v-list>
        <v-divider></v-divider>
        <v-list subheader dense id="external-tools-list">
          <v-subheader>Tools</v-subheader>
          <v-list-item v-for="tool in tools" v-if="tool.enabled" :key="tool.name" :target="tool.target" :href="tool.link" :title="$root.localizeMessage(tool.description)">
            <v-list-item-action>
              <v-icon>{{ tool.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title v-text="$root.localizeMessage(tool.name)"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-app-bar clipped-left app >
        <v-app-bar-nav-icon @click.stop="toolbar = !toolbar">
          <v-icon>fa-bars</v-icon>
        </v-app-bar-nav-icon>
        <v-toolbar-title>
          <a href="/" id="title">
            <img class="pt-1" :title="i18n.product" :alt="i18n.product" height="45" src="images/so-logo.svg"></v-img>
          </a>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <div id="connection-indicator" v-if="!connected || reconnecting">
          <v-icon class="mr-2" color="warning">fa-satellite-dish</v-icon>
          <span v-if="reconnecting" v-text="i18n.reconnecting"></span>
          <span v-if="!reconnecting" v-text="i18n.disconnected"></span>
        </div>
        <v-spacer></v-spacer>
        <v-menu bottom left offset-y>
          <template v-slot:activator="{ on }">
            <v-btn icon v-on="on">
              <v-icon>fa-user</v-icon>
            </v-btn>
          </template>
          <v-list id="top-menu">
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title v-text="username"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-divider></v-divider>
            <v-list-item @click.stop="toggleTheme">
              <v-list-item-action>
                <v-icon class="mx-auto">fa-adjust</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title v-text="i18n.darkMode"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item target="so-help" :href="parameters.releaseNotesUrl">
              <v-list-item-action>
                <v-icon class="mx-auto">fa-gift</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title v-text="i18n.whatsnew"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item target="so-help" :href="parameters.docsUrl">
              <v-list-item-action>
                <v-icon class="mx-auto">fa-question</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title v-text="i18n.help"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item target="so-cheatsheet" :href="parameters.cheatsheetUrl">
              <v-list-item-action>
                <v-icon class="mx-auto">fa-scroll</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title v-text="i18n.cheatsheet"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item target="so-blog" href="https://blog.securityonion.net/">
              <v-list-item-action>
                <v-icon class="mx-auto">fa-info</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title v-text="i18n.blog"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-divider></v-divider>
            <v-list-item :href="settingsUrl">
              <v-list-item-action>
                <v-icon class="mx-auto">fa-user-edit</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title v-text="i18n.settings"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item @click.stop="logout">
              <v-list-item-action>
                <v-icon class="mx-auto">fa-sign-out-alt</v-icon>
              </v-list-item-action>
              <v-list-item-content>
                <v-list-item-title v-text="i18n.logout"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-app-bar>
      <v-main>
        <v-overlay id="loading" :value="loading">
          <v-progress-circular indeterminate color="primary" width="2" size="64"></v-progress-circular>
        </v-overlay>
        <v-snackbar id="error" top centered rounded close :timeout="errorTimeout" v-model="error" color="error">
          <template v-slot:action="{ attrs }">
            <v-btn icon small v-bind="attrs" @click="error = false">
              <v-icon>fa-times</v-icon>
            </v-btn>
          </template>
          {{ errorMessage }}
          <div class="mt-2 no-underline">
            {{ i18n.errorHelp }}
            <a target="so-help" :href="parameters.docsUrl + 'help.html'">
              <v-icon>fa-life-ring</v-icon>
            </a>
          </div>
        </v-snackbar>
        <v-snackbar id="warning" top centered rounded close :timeout="warningTimeout" v-model="warning" color="warning">
          <template v-slot:action="{ attrs }">
            <v-btn icon small v-bind="attrs" @click="warning = false">
              <v-icon>fa-times</v-icon>
            </v-btn>
          </template>
          {{ warningMessage }}
        </v-snackbar>
        <v-alert dismissible type="info" icon="fa-info" v-model="info" transition="scale-transition" v-text="infoMessage"></v-alert>
        <v-snackbar id="tip" top centered rounded close :timeout="tipTimeout" v-model="tip" color="info">
          <template v-slot:action="{ attrs }">
            <v-btn icon small v-bind="attrs" @click="tip = false">
              <v-icon>fa-times</v-icon>
            </v-btn>
          </template>
          {{ tipMessage }}
        </v-snackbar>
        <router-view id="main-view"></router-view>
        <textarea id="clipboardBuffer"></textarea>
      </v-main>
      <v-footer app>
        <span id="version" class="text-no-wrap">
          {{ i18n.version }}: {{ version }}
          <a class="mx-2" target="so-help" :href="parameters.docsUrl + 'eol.html'">
            <v-icon :color="$root.eol_color(new Date())":title="i18n.versionEolHelp">fa-exclamation-triangle</v-icon>
          </a>
        </span>
        <v-spacer></v-spacer>
        <span class="text-no-wrap d-none d-md-flex">
          &copy; {{ new Date().getFullYear() }} 
          <a class="footer mx-1" target="sos" href="https://securityonionsolutions.com/">
            Security Onion Solutions, LLC
          </a>
        </span>
        <span class="text-no-wrap d-md-none">
          &copy; {{ new Date().getFullYear() }} 
          <a class="footer mx-1" target="sos" href="https://securityonionsolutions.com/">
            SOS
          </a>
        </span>
        <v-spacer></v-spacer>
        <span class="text-no-wrap d-none d-lg-flex">
          <router-link id="termsLink" to="/terms" class="footer">{{ i18n.terms }}</router-link>
        </span>
        <span class="text-no-wrap d-lg-none">
          <router-link id="termsLink" to="/terms" class="footer">{{ i18n.tcs }}</router-link>
        </span>
      </v-footer>
    </v-app>

    <script type="text/x-template" id="page-home">
      <v-container fluid>
        <v-row>
          <v-col>
            <h2 v-text="i18n.home"></h2>
          </v-col>
        </v-row>
        <v-row>
          <v-col class="mx-auto px-12">
            <div id="motd" class="markdown-body" :inner-html.prop="motd | formatMarkdown"></div>
          </v-col>
          <v-col class="mx-auto text-center">
            <div v-html="i18n.sponsorsIntro" class="mb-6"></div>
            <a target="sos" href="https://securityonionsolutions.com/" class="text-decoration-none">
              <img v-if="!$vuetify.theme.dark" height="200" src="images/sos-logo.svg">
              <img v-if="$vuetify.theme.dark" height="200" src="images/sos-logo-white.svg">
            </a>
          </v-col>
        </v-row>
      </v-container>
    </script>

    <script type="text/x-template" id="page-hunt">
      <v-container fluid>
        <v-row>
          <v-col cols="3">
            <h2 v-text="i18n[category]"></h2>
          </v-col>
          <v-col cols="5">
            <v-expansion-panels>
              <v-expansion-panel>
                <v-expansion-panel-header id="huntOptionsHeader">{{i18n.options}}</v-expansion-panel-header>
                <v-expansion-panel-content>
                  <v-switch v-if="isCategory('alerts') || isCategory('cases')" id="enable-advanced" :disabled="loading()" v-model="advanced" dense hide-details class="my-0" :label="i18n.advanced"></v-switch>
                  <v-switch v-if="isAdvanced()" id="auto-hunt" :disabled="loading()" v-model="autohunt" dense hide-details class="my-0" :label="i18n.autohunt"></v-switch>
                  <v-switch v-for="toggle in filterToggles" :key="toggle.name"
                    :id="'filterToggle-' + toggle.name" 
                    :disabled="loading()" 
                    v-model="toggle['enabled']" 
                    dense hide-details class="my-0"
                    @click="filterToggled($event, toggle)"
                    :label="$root.localizeMessage(toggle.name)" @click="notifyInputsChanged()"></v-switch>
                  <v-select id="autoRefresh" class="ml-" :disabled="loading()" v-model="autoRefreshInterval" :items="autoRefreshIntervals" :hint="i18n.autoRefresh" persistent-hint prepend-icon="fa-hourglass-half"></v-select>
                  <v-select :disabled="loading()" @change="saveTimezone" v-model="zone" :items="$root.timezones" :hint="i18n.timezoneHelp" persistent-hint prepend-icon="fa-user-clock"></v-select>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-col>
          <v-spacer></v-spacer>
          <v-col cols="2" align="end">
            <h4 v-if="loaded">{{ i18n.eventTotal }} {{ totalEvents.toLocaleString() }}</h4>
          </v-col>
        </v-row>
        <v-row align="start" v-if="createLink != ''">
          <v-col cols="12">
            <v-toolbar class="elevation-0" fixed>
              <router-link :to="createLink" style="text-decoration: none; cursor: 'pointer'">
                <v-btn color="primary" id="add-case-button">
                  <v-icon :title="i18n.create">fa-plus</v-icon>
                </v-btn>
              </router-link>
            </v-toolbar>
          </v-col>
        </v-row>
        <v-row align="start">
          <v-col cols="12" md="7">
            <v-textarea :clearable="isAdvanced()" :auto-grow="isAdvanced()" :readonly="!isAdvanced()" :disabled="loading()" @change="notifyInputsChanged" class="mx-2" v-model="$data[isAdvanced() ? 'query' : 'queryName']" :hint="isAdvanced() ? i18n.queryHelp : ''" rows="1" persistent-hint prepend-icon="fa-search" @keydown.enter.prevent="hunt" id="hunt-query-input">
              <template v-slot:prepend-inner>
                <v-menu dense bottom three-line offset-y>
                  <template v-slot:activator="{ on: menu }">
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on: tooltip }">
                        <v-btn icon small v-on="{ ...tooltip, ...menu }" id="hunt-query-dropdown-button">
                          <v-icon>fa-angle-down</v-icon>
                        </v-btn>
                      </template>
                      <span>{{ i18n.queriesHelp }}</span>
                    </v-tooltip>
                  </template>
                  <v-list dense class="overflow-y-auto" style="max-height: 600px" id="hunt-query-dropdown-list">
                    <v-list-item v-if="isAdvanced() && mruQueryLimit > 0" v-for="query in mruQueries" :key="query">
                      <v-list-item-content @click="huntQuery(query)" :style="{ cursor: 'pointer'}">
                        <v-list-item-title v-text="query"></v-list-item-title>
                        <v-list-item-subtitle>
                          <span class="text-primary">{{ i18n.mruQuery }} &mdash;</span>
                          {{ i18n.mruQueryHelp }}
                        </v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                    <v-divider v-if="isAdvanced()"></v-divider>
                    <v-list-item v-for="query in queries" :key="query.query">
                      <v-list-item-content @click="huntQuery(query.query)" :style="{ cursor: 'pointer'}" :title="query.description">
                        <v-list-item-title class="text-primary">
                          {{ query.name }}
                        </v-list-item-title>
                        <v-list-item-subtitle v-if="query.showSubtitle" v-text="query.query"></v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list>
                </v-menu>
              </template>
              <template v-if="!isCategory('hunt')" v-slot:append-outer>
                <v-btn small icon id="switch-to-hunt-button" :title="i18n.huntHelp" @click="switchToHunt()">
                  <v-icon>fa-crosshairs</v-icon>
                </v-btn>
              </template>
            </v-textarea>
          </v-col>
          <v-col cols="12" md="5" class="d-flex flex-nowrap align-center">
            <v-text-field :disabled="loading()" v-if="relativeTimeEnabled" id="huntrelativetimevalue" @change="notifyInputsChanged" class="mx-2" 
                v-model="relativeTimeValue" :hint="i18n.relativeTimeHelp" persistent-hint="true" type="number">
              <template v-slot:prepend>
                <v-btn v-if="relativeTimeEnabled" icon x-small @click="showAbsoluteTime" id="show-absolute-time">
                  <v-icon>fa-history</v-icon>
                </v-btn>
                <div v-if="relativeTimeEnabled" class="pt-1 px-4">
                  {{ i18n.last }}
                </div>
              </template>
              <template v-slot:append-outer>
                <v-select id="huntrelativetimeunit" class="my-n1 py-0" :disabled="loading()" v-if="relativeTimeEnabled" @change="notifyInputsChanged"
                  v-model="relativeTimeUnit" :items="relativeTimeUnits"></v-select>
              </template>
            </v-text-field>
            <v-text-field :disabled="loading()" v-if="!relativeTimeEnabled" id="huntdaterange" @change="notifyInputsChanged" class="mx-2" 
              v-model="dateRange" :hint="i18n.timePickerHelp" persistent-hint="true" 
              prepend-inner-icon="fa-angle-down" @click:prepend-inner="showDateRangePicker">
              <template v-slot:prepend>
                <v-btn v-if="!relativeTimeEnabled" icon x-small @click="showRelativeTime" id="show-relative-time">
                  <v-icon>fa-calendar-alt</v-icon>
                </v-btn>
              </template>
            </v-text-field>
            <v-btn id="hunt" :disabled="loading()" :color="huntPending ? 'light-green accent-4' : (autoRefreshInterval ? 'secondary' : 'primary')" @click.stop="hunt">
              <span v-if="isCategory('hunt')" class="d-sm-none d-lg-inline pr-2" v-text="i18n.hunt"></span>
              <span v-if="!isCategory('hunt')" class="d-sm-none d-lg-inline pr-2" v-text="i18n.refresh"></span>
              <v-icon v-if="isCategory('hunt') && !autoRefreshInterval">fa-crosshairs</v-icon>
              <v-icon v-if="!isCategory('hunt') && !autoRefreshInterval">fa-sync</v-icon>
              <v-icon v-if="autoRefreshInterval">fa-hourglass-half</v-icon>
            </v-btn>
          </v-col>
        </v-row>
        <v-row v-if="loaded && (queryFilters.length > 0 || queryGroupBys.length > 0 || querySortBys.length > 0)">
          <v-col cols="12">
            <span v-for="filter in queryFilters" :key="filter">
              <v-chip class="filter mx-1 my-1" color="primary" close @click:close="removeFilter(filter)">{{ filter }}</v-chip>
            </span>
            <span v-for="sortBy in querySortBys" :key="sortBy">
              <v-chip class="sortBy mx-1 my-1" color="secondary" close @click:close="removeSortBy(sortBy)">{{ i18n.sortedBy }} {{ sortBy }}</v-chip>
            </span>
          </v-col>
        </v-row>
        <v-col id="graphs" v-if="loaded && isAdvanced()">
          <v-toolbar dense flat>
            <v-toolbar-title>{{ i18n.standardMetrics }}</v-toolbar-title>
            <v-spacer />
            <v-btn
              plain
              icon
              small
              class="mr-1"
              @click="toggleShowSection('hunt-graphs')"
            >
              <v-icon v-if="!isExpandedSection('hunt-graphs')">fa-angle-down</v-icon>
              <v-icon v-if="isExpandedSection('hunt-graphs')">fa-angle-up</v-icon>
            </v-btn>
          </v-toolbar>
          <v-expand-transition>
            <div v-if="isExpandedSection('hunt-graphs')">
              <v-row v-if="!metricsEnabled">
                <v-col cols="12">
                  <line-chart :height="chartHeight" :chartdata="timelineChartData" :options="timelineChartOptions"/>
                </v-col>
              </v-row>
              <v-row v-if="metricsEnabled">
                <v-col cols="12" md="4">
                  <bar-chart id="topChart" :height="chartHeight" :chartdata="topChartData" :options="topChartOptions"/>
                </v-col>
                <v-col cols="12" md="4">
                  <line-chart id="timelineChart" :height="chartHeight" :chartdata="timelineChartData" :options="timelineChartOptions"/>
                </v-col>
                <v-col cols="12" md="4">
                  <bar-chart id="bottomChart" :height="chartHeight" :chartdata="bottomChartData" :options="bottomChartOptions"/>
                </v-col>
              </v-row>
            </div>
          </v-expand-transition>
        </v-col>
        <v-col id="group-metrics" v-if="metricsEnabled">
          <v-toolbar v-if="isAdvanced()" dense flat>
            <v-toolbar-title>{{ i18n.groups }}</v-toolbar-title>
            <v-spacer />
            <v-btn
              plain
              icon
              small
              class="mr-1"
              @click="toggleShowSection('hunt-groups')"
            >
              <v-icon v-if="!isExpandedSection('hunt-groups')">fa-angle-down</v-icon>
              <v-icon v-if="isExpandedSection('hunt-groups')">fa-angle-up</v-icon>
            </v-btn>
          </v-toolbar>
          <v-expand-transition>
            <v-row v-if="isExpandedSection('hunt-groups')">
              <v-col cols="12">
                <v-container fluid>
                  <v-row>
                    <v-col cols="4"></v-col>
                    <v-col cols="2">
                      <v-select :disabled="loading()" @change="notifyInputsChanged" v-model="groupByLimit" :items="groupByLimitOptions" :label="i18n.fetchLimit"></v-select>
                    </v-col>
                    <v-col cols="6">
                      <v-text-field v-model="groupByFilter" clearable prepend-icon="fa-filter" :label="i18n.filterResults" single-line hide-details></v-text-field>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col v-for="(group, groupIdx) in groupBys" class="groupBy">
                      <div v-if="group.chart_type">
                        <router-link class="mx-1" :to="buildGroupWithoutOptionsRoute(groupIdx)" :title="i18n.showTable" style="text-decoration: none; cursor: 'pointer'">
                          <v-icon>fa-table-cells</v-icon>
                        </router-link>
                        <router-link class="mx-1" :to="buildToggleLegendRoute(group, groupIdx)" :title="i18n.toggleLegend" style="text-decoration: none; cursor: 'pointer'">
                          <v-icon>fa-list</v-icon>
                        </router-link>
                        <router-link class="mx-1" :to="buildMaximizeRoute(group, groupIdx)" :title="i18n.maximize" style="text-decoration: none; cursor: 'pointer'">
                          <v-icon>fa-expand</v-icon>
                        </router-link>
                        <v-btn icon class="mx-1" @click="removeGroupBy(groupIdx, -1)" :title="i18n.remove">
                          <v-icon>fa-trash</v-icon>
                        </v-btn>
                        <pie-chart v-if="group.chart_type == 'pie'" :id="'group-' + groupIdx" :chartdata="group.chart_data" :options="group.chart_options"/>
                        <bar-chart v-if="group.chart_type == 'bar'" :id="'group-' + groupIdx" :chartdata="group.chart_data" :options="group.chart_options"/>
                        <sankey-chart v-if="group.chart_type == 'sankey'" :id="'group-' + groupIdx" :chartdata="group.chart_data" :options="group.chart_options"/>
                      </div>
                      <v-data-table v-if="!group.chart_type" :id="'group-' + groupIdx" class="elevation-1" 
                        :search="groupByFilter" dense 
                        :footer-props="groupByFooters" :sort-by.sync="group.sortBy" :sort-desc.sync="group.sortDesc" 
                        @update:sort-by="updateGroupBySort" @update:sort-desc="updateGroupBySort"
                        :items-per-page.sync="groupByItemsPerPage" must-sort :headers="group.headers" :items="group.data" :custom-sort="sortEvents">
                        <template v-if="!group.maximized" v-for="(header, headerIdx) in group.headers" v-slot:["header." + header.value]="{ props }">
                          {{ header.text }}
                          <span class="table-header-actions mx-2">
                            <router-link v-if="header.value == 'count' && isAdvanced()" :to="buildGroupOptionRoute(groupIdx, [], 'pie')" :title="i18n.showPieChart" style="text-decoration: none; cursor: 'pointer'">
                              <v-icon>fa-chart-pie</v-icon>
                            </router-link>
                            <router-link v-if="header.value == 'count' && isAdvanced()" :to="buildGroupOptionRoute(groupIdx, [], 'bar')" :title="i18n.showBarChart" style="text-decoration: none; cursor: 'pointer'">
                              <v-icon>fa-chart-column</v-icon>
                            </router-link>
                            <router-link v-if="header.value == 'count' && isAdvanced() && isGroupSankeyCapable(group, groupIdx)" icon x-small :to="buildGroupOptionRoute(groupIdx, [], 'sankey')" :title="i18n.showSankeyChart" style="text-decoration: none; cursor: 'pointer'">
                              <v-icon>fa-diagram-project</v-icon>
                            </router-link>
                            <router-link v-if="header.value == 'count' && isAdvanced()" class="mx-1" :to="buildMaximizeRoute(group, groupIdx)" :title="i18n.maximize" style="text-decoration: none; cursor: 'pointer'">
                              <v-icon>fa-expand</v-icon>
                            </router-link>
                            <v-btn v-if="header.value != 'count' && header.value != ''" icon x-small @click.stop="removeGroupBy(groupIdx,headerIdx - getGroupByFieldStartIndex())" :title="i18n.remove">
                              <v-icon>fa-trash</v-icon>
                            </v-btn>
                          </span>
                        </template>
                        <template v-if="!group.maximized" v-slot:item="{ item, index }">
                          <tr>
                            <td v-if="aggregationActionsEnabled">
                              <v-btn id="alertButton" v-if="ackEnabled && item['event.severity_label']" class="mx-2" icon x-small
                                @click="ack($event, item, index, !isFilterToggleEnabled('acknowledged'), false, null, groupIdx)"
                                :color="item['event.severity_label'] + '_' + isFilterToggleEnabled('acknowledged') | colorSeverity">
                                <v-icon :title="isFilterToggleEnabled('acknowledged') ? i18n.alertUndoAcknowledge : i18n.alertAcknowledge">fa-bell</v-icon>
                              </v-btn>
                              <v-btn id="escalateButton" v-if="escalateEnabled" class="mx-2" icon x-small
                                @click="toggleEscalationMenu($event, item, groupIdx)"
                                :color="isFilterToggleEnabled('escalated') || item['event.escalated'] == true ? 'secondary' : 'primary'">
                                <v-icon :title="isFilterToggleEnabled('escalated') || item['event.escalated'] == true ? i18n.alertEscalated : i18n.escalate">fa-exclamation-triangle</v-icon>
                              </v-btn>
                            </td>
                            <td>
                              <v-tooltip bottom v-if="loaded && eventsEnabled && metricsEnabled && ( (group.headers.length==3 && group.headers[1]['value']=='count' ) || (group.headers.length==5 && group.headers[1]['value']=='count' && group.headers[2]['value']=='rule.name' && group.headers[3]['value']=='event.module' && group.headers[4]['value']=='event.severity_label') ) ">
                                <template v-slot:activator="{ on, attrs }">
                                  <span v-bind="attrs" v-on="on">
                                    <div class="count-drilldown d-inline-block" v-text="item.count.toLocaleString()" v-bind="attrs" @click="countDrilldown(item)"></div>
                                  </span>
                                </template>
                                <span>{{ i18n.quickDrilldown }}</span>
                              </v-tooltip>
                               <div v-else class="count-drilldown d-inline-block" v-text="item.count.toLocaleString()"></div>
                            </td>
                            <td v-for="field in group.headers.slice(getGroupByFieldStartIndex())" :key="field.value">
                              <div class="quick-action-trigger d-inline-block" v-text="item[field.value]" @click="toggleQuickAction($event, item, field.value, item[field.value])"></div>
                            </td>
                          </tr>
                        </template>
          
                      </v-data-table>
                    </v-col>
                  </v-row>
                </v-container>
              </v-col>
            </v-row>
          </v-expand-transition>
        </v-col>
        <v-col id="events" v-if="loaded && eventsEnabled && (isAdvanced() || !metricsEnabled)">
          <v-toolbar v-if="isAdvanced()" dense flat>
            <v-toolbar-title>{{ i18n.events }}</v-toolbar-title>
            <v-spacer />
            <v-btn
              plain
              icon
              small
              class="mr-1"
              @click="toggleShowSection('hunt-events')"
            >
              <v-icon v-if="!isExpandedSection('hunt-events')">fa-angle-down</v-icon>
              <v-icon v-if="isExpandedSection('hunt-events')">fa-angle-up</v-icon>
            </v-btn>
          </v-toolbar>
          <v-expand-transition>
            <v-row v-if="isExpandedSection('hunt-events')">
              <v-col cols="12">
                <v-data-table :search="eventFilter" :sort-by.sync="sortBy" item-key="soc_id" :expanded.sync="expanded" :sort-desc.sync="sortDesc" :footer-props="footerProps" 
                  :items-per-page.sync="itemsPerPage" must-sort :headers="eventHeaders" :items="eventData" show-expand :page.sync="eventPage" :custom-sort="sortEvents">
                  <template v-slot:top v-if="isAdvanced()">
                    <v-container fluid>
                      <v-row>
                        <v-col cols="4"></v-col>
                        <v-col cols="2">
                          <v-select :disabled="loading()" @change="notifyInputsChanged" v-model="eventLimit" :items="eventLimitOptions" :label="i18n.fetchLimit"></v-select>
                        </v-col>
                        <v-col cols="6">
                          <v-text-field v-model="eventFilter" clearable prepend-icon="fa-filter" :label="i18n.filterResults" single-line hide-details></v-text-field>
                        </v-col>
                      </v-row>
                    </v-container>
                  </template>        
                  <template v-slot:item="{ item, index }">
                    <tr>
                      <td>
                        <v-btn id="expandEvent" icon small @click="expand(item)">
                          <v-icon v-if="isExpanded(item)" :alt="i18n.eventExpand" :title="i18n.eventExpandHelp">fa-angle-down</v-icon>
                          <v-icon v-if="!isExpanded(item)" :alt="i18n.eventExpand" :title="i18n.eventExpandHelp">fa-angle-right</v-icon>
                        </v-btn>
                        <v-btn id="alertButton" v-if="ackEnabled && item['event.severity_label']" class="mx-2" icon x-small
                          @click="ack($event, item, index, !isFilterToggleEnabled('acknowledged'), false, null, -1)"
                          :color="item['event.severity_label'] + '_' + isFilterToggleEnabled('acknowledged') | colorSeverity">
                          <v-icon :title="isFilterToggleEnabled('acknowledged') ? i18n.alertUndoAcknowledge : i18n.alertAcknowledge">fa-bell</v-icon>
                        </v-btn>
                        <v-btn id="escalateButton" v-if="escalateEnabled" class="mx-2" icon x-small
                          @click="toggleEscalationMenu($event, item, -1)"
                          :color="isFilterToggleEnabled('escalated') || item['event.escalated'] == true ? 'secondary' : 'primary'">
                          <v-icon :title="isFilterToggleEnabled('escalated') || item['event.escalated'] == true ? i18n.alertEscalated : i18n.escalate">fa-exclamation-triangle</v-icon>
                        </v-btn>
                        <router-link :to="{ name: 'case', params: {id: item.soc_id}}" style="text-decoration: none; cursor: 'pointer'" v-if="viewEnabled">
                          <v-icon class="mr-2" :title="i18n.view">fa-binoculars</v-icon>
                        </router-link>
                      </td>
                      <td v-for="field in eventHeaders" :key="field.value">
                        <div class="quick-action-trigger d-inline-block" @click="toggleQuickAction($event, item, field.value, item[field.value])">
                          <span v-if="field.value != 'soc_timestamp'" v-text="item[field.value]"/>
                          <span v-if="field.value == 'soc_timestamp'" v-text="$root.formatLocalTimestamp(item[field.value], zone)"/>
                        </div>
                      </td>
                    </tr>
                  </template>
                  <template v-slot:expanded-item="{ headers, item }">
                    <tr>
                      <td :colspan="headers.length" class="px-0">
                        <v-data-table dense disable-pagination hide-default-header hide-default-footer must-sort :headers="expandedHeaders" :items="getExpandedData()">
                          <template v-slot:item="{ item }">
                            <tr class="pt-3">
                              <td class="expansion">
                                <div class="d-inline-block semi-transparent">
                                  <v-btn :disabled="!canQuery(item.key)" icon x-small :to="buildGroupByRoute(item.key)">
                                    <v-icon :alt="i18n.groupInclude" :title="i18n.groupIncludeHelp">fa-layer-group</v-icon>
                                  </v-btn>
                                </div>
                                <div class="d-inline-block expansion" v-text="item.key"></div>
                              </td>
                              <td class="expansion">
                                <div class="quick-action-trigger d-inline-block expansion hardwrap" v-text="item.value" @click="toggleQuickAction($event, expanded[0], item.key, item.value)"></div>
                              </td>
                            </tr>
                          </template>
                        </v-data-table>
                      </td>
                    </tr>
                  </template>
                </v-data-table>
              </v-col>
            </v-row>
          </v-expand-transition>
        </v-col>
        <v-row v-if="loaded && isAdvanced()">
          <v-col cols="6">
            <v-subheader inset>{{ i18n.eventFetchTook }} {{ fetchTimeSecs }} {{ i18n.seconds }}. {{ i18n.eventRoundTripTook }} {{ roundTripTimeSecs }} {{ i18n.seconds }}.</v-subheader>
          </v-col>
          <v-spacer></v-spacer>
        </v-row>
        <v-menu v-model="quickActionVisible" :position-x="quickActionX" :position-y="quickActionY" absolute>
          <v-list id="hunt-quick-action" color="secondary">
            <v-list-item id="actionFilterInclude" dense :to="filterRouteInclude" :title="i18n.filterIncludeHelp">
              <v-list-item-icon>
                <v-icon :alt="i18n.filterInclude" color="white">fa-search-plus</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="white--text">
                {{ i18n.filterInclude }}
              </v-list-item-title>
            </v-list-item>
            <v-list-item id="actionFilterExclude" dense :to="filterRouteExclude" :title="i18n.filterExcludeHelp">
              <v-list-item-icon>
                <v-icon :alt="i18n.filterExclude" color="white">fa-search-minus</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="white--text">
                {{ i18n.filterExclude }}
              </v-list-item-title>
            </v-list-item>
            <v-list-item id="actionFilterExact" dense :to="filterRouteExact" :title="i18n.filterExactHelp">
              <v-list-item-icon>
                <v-icon :alt="i18n.filterExact" color="white">fa-search</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="white--text">
                {{ i18n.filterExact }}
              </v-list-item-title>
            </v-list-item>
            <v-list-item id="actionDrilldown" dense :to="filterRouteDrilldown" :title="i18n.filterDrilldownHelp" v-if="!isAdvanced() && metricsEnabled">
              <v-list-item-icon>
                <v-icon :alt="i18n.filterDrilldown" color="white">fa-angle-double-down</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="white--text">
                {{ i18n.filterDrilldown }}
              </v-list-item-title>
            </v-list-item>
            <v-list-item id="actionGroupBy" dense :to="groupByRoute" :title="i18n.groupIncludeHelp">
              <v-list-item-icon>
                <v-icon :alt="i18n.groupInclude" color="white">fa-layer-group</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="white--text">
                {{ i18n.groupInclude }}
              </v-list-item-title>
            </v-list-item>
            <v-list-item id="actionGroupByNew" dense :to="groupByNewRoute" :title="i18n.groupNewHelp">
              <v-list-item-icon>
                <v-icon :alt="i18n.groupNew" color="white">fa-layer-group</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="white--text">
                {{ i18n.groupNew }}
              </v-list-item-title>
            </v-list-item>
            <v-list-group dense @click.stop>
              <template v-slot:activator>
                <v-list-item-icon>
                  <v-icon color="white">fa-clipboard</v-icon>
                </v-list-item-icon>
                <v-list-item-title class="white--text">
                  {{ i18n.share }}
                </v-list-item-title>
              </template>
              <v-list-item id="actionCopyValue" dense @click="$root.copyToClipboard(quickActionValue)">
                <v-list-item-icon>
                  <v-icon color="white">fa-copy</v-icon>
                </v-list-item-icon>
                <v-list-item-title class="white--text">
                  {{ i18n.copyFieldToClipboard }}
                </v-list-item-title>
              </v-list-item>
              <v-list-item id="actionCopyFieldValue" dense @click="$root.copyToClipboard(quickActionField + ': ' + quickActionValue)">
                <v-list-item-icon>
                  <v-icon color="white">fa-copy</v-icon>
                </v-list-item-icon>
                <v-list-item-title class="white--text">
                  {{ i18n.copyFieldValueToClipboard }}
                </v-list-item-title>
              </v-list-item>
              <v-list-item id="actionCopyEventAsJson" dense @click="$root.copyToClipboard(quickActionEvent, 'json')">
                <v-list-item-icon>
                  <v-icon color="white">fa-copy</v-icon>
                </v-list-item-icon>
                <v-list-item-title class="white--text">
                  {{ i18n.copyEventToClipboardAsJson }}
                </v-list-item-title>
              </v-list-item>
              <v-list-item id="actionCopyEventAsKvp" dense @click="$root.copyToClipboard(quickActionEvent, 'kvp')">
                <v-list-item-icon>
                  <v-icon color="white">fa-copy</v-icon>
                </v-list-item-icon>
                <v-list-item-title class="white--text">
                  {{ i18n.copyEventToClipboardAsKvp }}
                </v-list-item-title>
              </v-list-item>
            </v-list-group>
            <v-list-group dense @click.stop color="white">
              <template v-slot:activator>
                <v-list-item-icon>
                  <v-icon color="white">fa-external-link-alt</v-icon>
                </v-list-item-icon>
                <v-list-item-title class="white--text">
                  {{ i18n.quickActions }}
                </v-list-item-title>
              </template>
              <v-list-item dense v-for="action in actions" class="custom-quick-action-button" v-if="action.enabled" :key="action.link" :href="action.background ? '' : action.linkFormatted" :title="$root.localizeMessage(action.description)" :target="action.target" @click="$root.performAction($event, action)">
                <v-list-item-icon>
                  <v-icon :alt="action.name" color="white">{{ action.icon }}</v-icon>
                </v-list-item-icon>
                <v-list-item-title class="white--text">
                  {{ $root.localizeMessage(action.name) }}
                </v-list-item-title>
              </v-list-item>
            </v-list-group>
          </v-list>
        </v-menu>

        <v-menu v-model="escalationMenuVisible" :position-x="escalationMenuX" :position-y="escalationMenuY" absolute>
          <v-list id="hunt-escalate-menu" color="secondary">
            <v-list-item id="escalateNewMenuItem" dense @click="ack($event, escalationItem, 0, true, true, null, escalationGroupIdx)" :title="i18n.escalateNewCaseHelp">
              <v-list-item-icon>
                <v-icon :alt="i18n.escalateNewCase" color="white">fa-plus</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="white--text">
                {{ i18n.escalateNewCase }}
              </v-list-item-title>
            </v-list-item>
            <v-divider></v-divider>
            <v-subheader class="white--text">{{ i18n.escalateExistingCase }}</v-subheader>
            <v-list-item dense v-for="socCase in mruCases" :title="i18n.escalateExistingCaseHelp" @click="ack($event, escalationItem, 0, true, true, socCase.id, escalationGroupIdx)">
              <v-list-item-icon>
                <v-icon :alt="i18n.escalateExistingCase" color="white">fa-link</v-icon>
              </v-list-item-icon>
              <v-list-item-title class="white--text">
                {{ formatCaseSummary(socCase) }}
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

      </v-container>
    </script>

    <script type="text/x-template" id="page-terms">
      <v-container fluid>
        <v-row>
          <v-col>
            <h2 v-text="i18n.terms"></h2>
            {{ i18n.licenseInfo }} (<a id="licenseLink" target="new" href="https://raw.githubusercontent.com/security-onion-solutions/securityonion-soc/master/LICENSE">GPLv2</a>)
          </v-col>
        </v-row>
        <v-row>
          <v-col v-html="i18n.termDetails">
          </v-col>
        </v-row>
      </v-container>
    </script>

    <script type="text/x-template" id="page-downloads">
      <v-container fluid>
        <v-row>
          <v-col>
            <h2 v-text="i18n.downloads"></h2>
          </v-col>
        </v-row>
        <v-alert type="info" v-html="i18n.downloadsFirewallTip"></v-alert>
        <v-row>
          <v-col>
            <h3 class="mt-2" id="download-elastic">{{ i18n.downloadsElastic }} ({{ $root.elasticVersion }})</h3>
            <ul>
              <li><a :href="'/downloads/winlogbeat-oss-' + $root.elasticVersion + '-windows-x86_64.msi'" :download="'winlogbeat-oss-' +  $root.elasticVersion + '-windows-x86_64.msi'">Winlogbeat</a> (Windows)</li>

              <li><a :href="'/downloads/filebeat-oss-' + $root.elasticVersion + '-amd64.deb'" :download="'filebeat-oss-' +  $root.elasticVersion + '-amd64.deb'">Filebeat DEB</a> (Linux [amd64]: Debian, Ubuntu)</li>
              <li><a :href="'/downloads/filebeat-oss-' + $root.elasticVersion + '-x86_64.rpm'" :download="'filebeat-oss-' +  $root.elasticVersion + '-x86_64.rpm'">Filebeat RPM</a> (Linux [x86_64]: Amazon, CentOS, Rocky, Fedora, Oracle, SUSE)</li>

              <li><a :href="'/downloads/metricbeat-oss-' + $root.elasticVersion + '-amd64.deb'" :download="'metricbeat-oss-' +  $root.elasticVersion + '-amd64.deb'">Metricbeat DEB</a> (Linux [amd64]: Debian, Ubuntu)</li>
              <li><a :href="'/downloads/metricbeat-oss-' + $root.elasticVersion + '-x86_64.rpm'" :download="'metricbeat-oss-' +  $root.elasticVersion + '-x86_64.rpm'">Metricbeat RPM</a> (Linux [x86_64]: Amazon, CentOS, Rocky, Fedora, Oracle, SUSE)</li>

              <li><a :href="'/downloads/auditbeat-oss-' + $root.elasticVersion + '-amd64.deb'" :download="'auditbeat-oss-' +  $root.elasticVersion + '-amd64.deb'">Auditbeat DEB</a> (Linux [amd64]: Debian, Ubuntu)</li>
              <li><a :href="'/downloads/auditbeat-oss-' + $root.elasticVersion + '-x86_64.rpm'" :download="'auditbeat-oss-' +  $root.elasticVersion + '-x86_64.rpm'">Auditbeat RPM</a> (Linux [x86_64]: Amazon, CentOS, Rocky, Fedora, Oracle, SUSE)</li>
            </ul>
            <h3 class="mt-2" id="download-wazuh">{{ i18n.downloadsWazuh }} ({{ $root.wazuhVersion }})</h3>
            <ul>
              <li><a :href="'/downloads/wazuh-agent-' + $root.wazuhVersion + '.msi'" :download="'wazuh-agent-' +  $root.wazuhVersion + '.msi'">MSI</a> (Windows)</li>
              <li><a :href="'/downloads/wazuh-agent_' + $root.wazuhVersion + '_amd64.deb'" :download="'wazuh-agent_' +  $root.wazuhVersion + '_amd64.deb'">DEB</a> (Linux [amd64]: Debian, Ubuntu)</li>
              <li><a :href="'/downloads/wazuh-agent-' + $root.wazuhVersion + '.x86_64.rpm'" :download="'wazuh-agent-' +  $root.wazuhVersion + '.x86_64.rpm'">RPM</a> (Linux [x86_64]: Amazon, CentOS, Rocky, Fedora, Oracle, SUSE)</li>
              <li><a :href="'/downloads/wazuh-agent-' + $root.wazuhVersion + '.pkg'" :download="'wazuh-agent-' +  $root.wazuhVersion + '.pkg'">PKG</a> (MacOS)</li>
            </ul>
            <h3 class="mt-2" v-text="i18n.downloadsOsquery" id="download-osquery"></h3>
            <ul>
              <li><a href="/packages/launcher.msi" download="msi-launcher.msi">MSI</a> (Windows)</li>
              <li><a href="/packages/launcher.deb" download="deb-launcher.deb">DEB</a> (Linux [amd64]: Debian, Ubuntu)</li>
              <li><a href="/packages/launcher.rpm" download="rpm-launcher.rpm">RPM</a> (Linux [x86_64]: Amazon, CentOS, Rocky, Fedora, Oracle, SUSE)</li>
              <li><a href="/packages/launcher.pkg" download="pkg-launcher.pkg">PKG</a> (MacOS)</li>
              <li><a href="/packages/launcher.flags" download="launcher.flags.txt">RPM & DEB Config Flag File</a></li>
              <li><a href="/packages/launcher-msi.flags" download="launcher-msi.flags.txt">MSI Config Flag File</a></li>
            </ul>
            <p></p>
            <div v-html="i18n.downloadsInfo"></div>
          </v-col>
        </v-row>
      </v-container>
    </script>

    <script type="text/x-template" id="page-user">
      <v-container fluid>
        <v-row>
          <v-col>
            <h2 v-text="i18n.user"></h2>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
              <v-card>
                <v-form v-model="form.valid">
                  <v-container grid-list-sm class="pa-4">
                    <v-row>
                      <v-col xs12>
                        <v-text-field v-model="form.email" :placeholder="i18n.email" autofocus="true" :rules="[rules.required]"></v-text-field>
                        <v-text-field v-model="form.firstName" :placeholder="i18n.firstName"></v-text-field>
                        <v-text-field v-model="form.lastName" :placeholder="i18n.lastName"></v-text-field>
                        <v-text-field v-model="form.note" :placeholder="i18n.note"></v-text-field>
                      </v-col>
                    </v-row>
                  </v-container>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn :disabled="!form.valid" text color="primary" @click="updateUser" v-text="i18n.update"></v-btn>
                  </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-col>
        </v-row>
      </v-container>
    </script>

    <script type="text/x-template" id="page-users">
      <v-container fluid>
        <v-row>
          <v-col>
            <h2 v-text="i18n.users"></h2>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-toolbar class="elevation-0" class="d-none">
              <v-btn class="action" color="blue" @click.stop="dialog = !dialog">
                <v-icon>fa-plus</v-icon>
              </v-btn>
            </v-toolbar>
            <v-dialog v-model="deleteUserDialog" persistent max-width="390">
              <v-card>
                <v-card-title class="headline" v-text="i18n.deleteUserTitle"></v-card-title>
                <v-card-text v-text="i18n.deleteUserConfirm"></v-card-text>
                <v-card-text v-text="deleteUserEmail"></v-card-text>
                <v-card-text v-text="i18n.continue"></v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn text @click.stop="hideDeleteConfirm()" v-text="i18n.cancel"></v-btn>
                  <v-btn color="warning" text @click.stop="removeUser(deleteUserId)" v-text="i18n.delete"></v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            <v-data-table :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :footer-props="footerProps" 
              :items-per-page.sync="itemsPerPage" must-sort :headers="headers" :items="users">
              <template v-slot:item="props">
                <tr>
                  <td v-text="props.item.email"></td>
                  <td v-text="props.item.firstName"></td>
                  <td v-text="props.item.lastName"></td>
                  <td v-text="props.item.note"></td>
                  <td v-text="$root.formatStringArray(props.item.roles)"></td>
                  <td>
                    <v-icon v-if="props.item.mfaStatus == 'enabled' && props.item.status != 'locked'" :title="i18n.totpEnabled">fa-user-shield</v-icon>
                    <v-icon v-if="props.item.mfaStatus != 'enabled' && props.item.status != 'locked'" :title="i18n.loginEnabled">fa-user</v-icon>
                    <v-icon v-if="props.item.status == 'locked'" :title="i18n.loginDisabled">fa-user-slash</v-icon>
                  </td>
                  <td>
                    <router-link :to="{ name: 'user', params: {id: props.item.id}}" :style="{ cursor: 'pointer'}">
                      <v-icon class="mr-2 d-none" :title="i18n.edit">fa-edit</v-icon>
                    </router-link>
                    <v-icon class="mr-2 d-none" :title="i18n.delete" @click.stop="showDeleteConfirm(props.item)">fa-times-circle</v-icon>
                  </td>
                </tr>
              </template>
            </v-data-table>
            <v-dialog v-model="dialog" width="800px">
              <v-card>
                <v-card-title class="lighten-4 py-4 title">{{ i18n.add }} {{ i18n.user }}</v-card-title>
                <v-form v-model="form.valid">
                  <v-container grid-list-sm class="pa-4">
                    <v-row>
                      <v-col xs12>
                        <v-text-field v-model="form.email" :placeholder="i18n.email" autofocus="true" :rules="[rules.required]"></v-text-field>
                        <v-text-field v-model="form.password" :placeholder="i18n.password" :type="showPassword ? 'text' : 'password'" 
                          @click:append="showPassword = !showPassword" :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'" 
                          :rules="[rules.required]"></v-text-field>
                        <v-text-field v-model="form.firstName" :placeholder="i18n.firstName"></v-text-field>
                        <v-text-field v-model="form.lastName" :placeholder="i18n.lastName"></v-text-field>
                        <v-text-field v-model="form.note" :placeholder="i18n.note"></v-text-field>
                        <v-text-field name="csrf_token" v-model="form.csrfToken" class="d-none"></v-text-field>
                        <v-text-field name="method" v-model="form.method" class="d-none"></v-text-field>
                      </v-col>
                    </v-row>
                  </v-container>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn text @click="dialog = false">{{ i18n.cancel }}</v-btn>
                    <v-btn :disabled="!form.valid" text color="primary" @click="submitAddUser" v-text="i18n.add"></v-btn>
                  </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-col>
        </v-row>
      </v-container>
    </script>

    <script type="text/x-template" id="page-jobs">
      <v-container fluid>
        <v-row>
          <v-col>
            <h2 v-if="isKind('pcap')" v-text="i18n.jobs"></h2>
            <h2 v-if="!isKind('pcap')" v-text="kind"></h2>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-toolbar v-if="isKind('pcap')" class="elevation-0" fixed>
              <v-btn color="primary" @click.stop="dialog = !dialog" id="add-pcap-job-button">
                <v-icon>fa-plus</v-icon>
              </v-btn>
            </v-toolbar>
            <v-data-table :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :footer-props="footerProps" :items-per-page.sync="itemsPerPage" 
              must-sort :headers="headers" :items="jobs">
              <template v-slot:item="props">
                <tr>
                  <td>
                    <router-link :to="{ name: 'job', params: {jobId: props.item.id}}" :style="{ cursor: 'pointer'}">
                      {{ props.item.id }}
                    </router-link>
                  </td>
                  <td>{{ props.item.owner }}</td>
                  <td>{{ props.item.createTime | formatTimestamp }}</td>
                  <td>{{ props.item.completeTime | formatTimestamp }}</td>
                  <td v-text="props.item.nodeId"></td>
                  <td><v-chip :color="props.item | colorJobStatus">{{ props.item | formatJobStatus }}</v-chip></td>
                  <td>
                    <router-link :to="{ name: 'job', params: {jobId: props.item.id}}" style="text-decoration: none; cursor: 'pointer'">
                      <v-icon class="mr-2" :title="i18n.view">fa-binoculars</v-icon>
                    </router-link>
                    <v-icon class="mr-2" :title="i18n.delete" @click.stop="deleteJob(props.item)">fa-times-circle</v-icon>
                  </td>
                </tr>
              </template>
            </v-data-table>
            <v-dialog v-model="dialog" width="800px">
              <v-card id="pcap-job-dialog">
                <v-card-title class="lighten-4 py-4 title">{{ i18n.add }} {{ i18n.job }}</v-card-title>
                <v-form v-model="form.valid">
                  <v-container grid-list-sm class="pa-4">
                    <v-row>
                      <v-col xs12>
                        <v-text-field v-model="form.sensorId" :placeholder="i18n.sensorId" persistent-hint :hint="i18n.sensorIdHelp"></v-text-field>
                        <v-text-field v-model="form.importId" :placeholder="i18n.importId" persistent-hint :hint="i18n.importIdHelp"></v-text-field>
                        <v-text-field v-model="form.srcIp" :placeholder="i18n.srcIp" persistent-hint :hint="i18n.srcIpHelp"></v-text-field>
                        <v-text-field v-model="form.srcPort" :placeholder="i18n.srcPort" persistent-hint :hint="i18n.srcPortHelp"></v-text-field>
                        <v-text-field v-model="form.dstIp" :placeholder="i18n.dstIp" persistent-hint :hint="i18n.dstIpHelp"></v-text-field>
                        <v-text-field v-model="form.dstPort" :placeholder="i18n.dstPort" persistent-hint :hint="i18n.dstPortHelp"></v-text-field>
                        <v-text-field v-model="form.beginTime" :placeholder="i18n.beginTime" persistent-hint :hint="i18n.beginTimeHelp"></v-text-field>
                        <v-text-field v-model="form.endTime" :placeholder="i18n.endTime" persistent-hint :hint="i18n.endTimeHelp"></v-text-field>
                      </v-col>
                    </v-row>
                  </v-container>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn text @click="clearAddJobForm()" v-text="i18n.clear"></v-btn>
                    <v-btn text @click="dialog = false" v-text="i18n.cancel"></v-btn>
                    <v-btn :disabled="!form.valid" text color="primary" @click="submitAddJob" v-text="i18n.add"></v-btn>
                  </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-col>
        </v-row>
      </v-container>
    </script>


    <script type="text/x-template" id="page-job">
      <v-container fluid @click="jobClickHandler()">
        <v-row>
          <v-col>
            <h2>{{ i18n.viewJob }}</h2>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-expansion-panels>
              <v-expansion-panel>
                <v-expansion-panel-header>
                  <v-chip>
                    <v-avatar>
                      <v-icon>fa-hashtag</v-icon>
                    </v-avatar>
                    <span id="jobDetailsId">{{ job.id }}</span>
                  </v-chip>
                  <v-chip>
                    <v-avatar>
                      <v-icon>fa-ethernet</v-icon>
                    </v-avatar>
                    <span id="jobDetailsSensorId">{{ job.nodeId }}</span>
                  </v-chip>
                  <v-chip v-if="job.filter">
                    <v-avatar>
                      <v-icon>fa-file-export</v-icon>
                    </v-avatar>
                    <span id="jobDetailsSrc">{{ job.filter.srcIp }}:{{ job.filter.srcPort }}</span>
                  </v-chip>
                  <v-chip v-if="job.filter">
                    <v-avatar>
                      <v-icon>fa-file-import</v-icon>
                    </v-avatar>
                    <span id="jobDetailsDst">{{ job.filter.dstIp }}:{{ job.filter.dstPort }}</span>
                  </v-chip>
                </v-expansion-panel-header>
                <v-expansion-panel-content>
                  <v-container fluid grid-list-sm class="pa-4">
                    <v-row>
                      <v-col>
                        <div>
                          <span class="filter label">{{ i18n.job }}:</span> 
                          <span v-if="job.filter" class="filter value">{{ job.id }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.owner }}:</span> 
                          <span v-if="job.filter" class="filter value">{{ job.owner }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.sensorId }}:</span> 
                          <span v-if="job.filter" class="filter value">{{ job.nodeId }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.importId }}:</span> 
                          <span v-if="job.filter" class="filter value">{{ job.filter.importId }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.srcIp }}:</span> 
                          <span v-if="job.filter" class="filter value">{{ job.filter.srcIp }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.srcPort }}:</span> 
                          <span v-if="job.filter" class="filter value">{{ job.filter.srcPort }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.dstIp }}:</span> 
                          <span v-if="job.filter" class="filter value">{{ job.filter.dstIp }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.dstPort }}:</span> 
                          <span v-if="job.filter" class="filter value">{{ job.filter.dstPort }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.dateQueued }}:</span>
                          <span v-if="job.filter" class="filter value">{{ job.createTime | formatDateTime}}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.dateCompleted }}:</span>
                          <span v-if="job.filter" class="filter value">{{ job.completeTime | formatDateTime}}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.dateFailed }}:</span>
                          <span v-if="job.filter" class="filter value">{{ job.failTime | formatDateTime}}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.beginTime }}:</span>
                          <span v-if="job.filter" class="filter value">{{ job.filter.beginTime | formatTimestamp }}</span>
                        </div>
                        <div>
                          <span class="filter label">{{ i18n.endTime }}:</span>
                          <span v-if="job.filter" class="filter value">{{ job.filter.endTime | formatTimestamp }}</span>
                        </div>
                      </v-col>
                    </v-row>
                  </v-container>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-col>
        </v-row>
        <v-row v-if="job.status == 0" row>
          <v-col>
            <v-alert :value="true" color="info" icon="fa-info">
              {{ i18n.jobInProgress }}
            </v-alert>
          </v-col>
        </v-row>
        <v-row v-if="job.status == 1">
          <v-col>
            <v-toolbar fixed class="elevation-0">
              <v-text-field v-model="search" clearable prepend-icon="fa-filter" :label="i18n.filterResults" single-line hide-details></v-text-field>
              <v-spacer></v-spacer>
              <v-btn-toggle v-model="packetOptions" class="transparent" multiple>
                <v-btn value="packets" icon :title="i18n.packetStreamHelp" text @click="captureLayoutAsStream()">
                  <v-icon>fa-list</v-icon>
                </v-btn>
                <v-btn value="hex" :title="i18n.hexHelp" text>
                  {{ i18n.hex }}
                </v-btn>
                <v-btn value="unwrap" :title="i18n.unwrapHelp" text @click="toggleWrap">
                  <v-icon>fa-envelope-open-text</v-icon>
                </v-btn>
              </v-btn-toggle>
              <v-spacer></v-spacer>
              <v-btn icon @click="expandPackets(false)" :title="i18n.collapseHelp" text>
                <v-icon>fa-window-minimize</v-icon>
              </v-btn>
              <v-btn icon @click="expandPackets(true)" :title="i18n.expandHelp" text>
                <v-icon>fa-window-maximize</v-icon>
              </v-btn>
              <v-spacer></v-spacer>
              <v-btn text icon @click="transcriptCyberChef()" :title="i18n.transcriptCyberChefHelp">
                <v-icon>fas fa-bread-slice</v-icon>
              </v-btn>
              <v-btn text icon :href="downloadUrl()" download :title="i18n.downloadPackets">
                <v-icon>fa-download</v-icon>
              </v-btn>
            </v-toolbar>
            <v-data-table ref="packetTable" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :items-per-page.sync="itemsPerPage" 
              :search="search" :footer-props="footerProps" must-sort :headers="headers" :hide-default-header="!isOptionEnabled('packets')" 
              :items="packets" item-key="number" :loading="packetsLoading" :expanded="expanded">
              <template v-slot:item="props">
                <tr @click="expandRow(props.item)" v-if="isOptionEnabled('packets')">
                  <td v-text="props.item.number"></td>
                  <td>{{ props.item.timestamp | formatTimestamp }}</td>
                  <td><v-chip :color="props.item.type | colorType">{{ props.item.type }}</v-chip></td>
                  <td>{{ props.item.srcIp }}</td>
                  <td>{{ props.item.srcPort }}</td>
                  <td>{{ props.item.dstIp }}</td>
                  <td>{{ props.item.dstPort }}</td>
                  <td><v-chip v-for="flag in props.item.flags" :color="flag | colorFlag" :key="flag">{{ flag }}</v-chip></td>
                  <td>{{ props.item.length }}</td>
                </tr>
              </template>
              <template v-slot:expanded-item="props">
                <tr v-if="isOptionEnabled('packets') || props.item.payloadOffset > 0">
                  <td :colspan="getPacketColumnSpan()" :class="getPacketClass(props.item)">
                    <pre class="hardwrap">{{ props.item | formatPacketView }}</pre>
                  </td>
                </tr>
              </template>
              <template v-slot:no-results>
                <v-alert :value="true" color="info" icon="fa-info">
                  {{ i18n.noSearchResults }}
                </v-alert>
              </template>
            </v-data-table>
            <div class="text-xs-center pt-2">
                <v-btn v-text="i18n.loadMore" @click="loadPackets()"></v-btn>
            </div>
          </v-col>
        </v-row>
        <v-row v-if="job.status == 2">
          <v-col>
            <v-alert :value="true" color="info" icon="fa-exclamation-triangle">
              {{ i18n.jobIncomplete }}
              <hr>
              {{ job.failTime | formatDateTime }}
              <br>
              {{ i18n.attempt }} {{ job.failCount }}: {{ job.failure }}
            </v-alert>
          </v-col>
        </v-row>
        <v-menu v-model="quickActionVisible" :position-x="quickActionX" :position-y="quickActionY" absolute>
          <v-list id="job-common-action" color="secondary">                                                                                
              <v-list-item id="actionCopyValue" dense @click="$root.copyToClipboard(quickActionValue)">
                <v-list-item-icon>                   
                  <v-icon color="white">fa-copy</v-icon>
                </v-list-item-icon>                                                                                 
                <v-list-item-title class="white--text">                                                             
                  {{ i18n.copyToClipboard }}                                  
                </v-list-item-title>                                                                                         
              </v-list-item>                                                                                                                        
          </v-list>                                                     
          <v-list id="job-quick-action" color="secondary">                                        
              <template v-slot:activator>                                                                        
                <v-list-item-icon>                                                                                 
                  <v-icon color="white">fa-external-link-alt</v-icon>                                              
                </v-list-item-icon>                                                                                                    
                <v-list-item-title class="white--text">                                                                                
                  {{ i18n.quickActions }}                                           
                </v-list-item-title>                                                                                      
              </template>                                                                                                 
              <v-list-item dense v-for="action in actions" class="custom-quick-action-button" v-if="action.enabled" :key="action.link" :href="action.background ? '' : action.linkFormatted" :title="$root.localizeMessage(action.description)" :target="action.target" @click="$root.performAction($event, action)">
                <v-list-item-icon>
                  <v-icon :alt="action.name" color="white">{{ action.icon }}</v-icon>
                </v-list-item-icon>                                                     
                <v-list-item-title class="white--text">                                      
                  {{ $root.localizeMessage(action.name) }}                                     
                </v-list-item-title>                                                           
              </v-list-item>                                                    
          </v-list>                                                                           
        </v-menu>
      </v-container>
    </script>

    <script type="text/x-template" id="page-case">
      <v-container fluid>
        <div class="mx-sm-12 mx-lg-6 mt-2 mb-6 mb-md-1">
          <div tabindex="0" class="case detail-field clicktoedit d-flex align-start pa-2" v-if="!isEdit('case-title')" 
            @click="startEdit('case-title-input', caseObj.title, 'case-title', 'title', modifyCase)" @keypress.space.prevent="startEdit('case-title-input', caseObj.title, 'case-title', 'title', modifyCase)">
            <h2 id="case-title" class="rounded">{{ caseObj.title }}</h2>
          </div>
          <div class="d-flex flex-column" v-if="isEdit('case-title')">
            <div class="mb-2">
              <v-form v-model="editForm.valid" @submit.prevent>
                <v-text-field id="case-title-input" hide-details="auto" outlined v-model="editForm.val" :rules="[rules.required]" persistent-hint :hint="i18n.caseTitleHelp"/>
              </v-form>
            </div>
            <div class="d-inline-flex justify-end">
              <v-btn text small color="primary" class="align-self-end" @click="stopEdit()">
                {{ i18n.cancel }}
              </v-btn>
              <v-btn :disabled="!editForm.valid" text small color="primary" class="align-self-end" @click="stopEdit(true)">
                {{ i18n.save }}
              </v-btn>
            </div>
          </div>
        </div>
        <v-row class="mx-sm-8 mx-md-12 mx-lg-4 flex-column flex-md-row">
          <v-col cols="12" md="9" class="case main" order="2" order-md="1">
            <div class="d-block d-md-none">
              <h2>{{ i18n.description }}</h2>
            </div>
            <div class="mb-6 mb-md-3">
              <div tabindex="0" class="clicktoedit d-flex align-start pa-2" v-if="!isEdit('case-description')" @click="startEdit('case-desc-input',  caseObj.description, 'case-description', 'description', modifyCase, [], true)"
              @keypress.space.prevent="startEdit('case-desc-input',  caseObj.description, 'case-description', 'description', modifyCase, [], true)">
                <div class="d-block" style="width: 100%;">
                  <div id="case-description" class="rounded case detail-field markdown-body" :inner-html.prop="caseObj.description | formatMarkdown"></div>
                </div>
              </div>
              <div class="d-flex flex-column" v-if="isEdit('case-description')">
                <div class="mb-2 pt-1 px-2 rounded rounded-md contrast-bg d-flex flex-column">
                  <div class="d-flex flex-column flex-sm-row align-sm-center align-self-start text-body-2 mb-1 ml-1">
                    <a class="case markdown-icon" href="https://www.markdownguide.org/cheat-sheet/" target="_blank" :title="i18n.markdownFormattingSupported"><v-icon>fab fa-markdown</v-icon></a>
                  </div>
                  <v-form v-model="editForm.valid" @submit.prevent>
                    <v-textarea id="case-desc-input" solo flat hide-details="auto" rows="5" dense color="text--black" v-model="editForm.val" :rules="[rules.required]" persistent-hint :hint="i18n.caseDescriptionHelp"/>
                  </form>
                </div>
                <div class="d-inline-flex justify-end">
                  <v-btn text small color="primary" class="align-self-end" @click="stopEdit()">
                    {{ i18n.cancel }}
                  </v-btn>
                  <v-btn :disabled="!editForm.valid" text small color="primary" class="align-self-end" @click="stopEdit(true)">
                    {{ i18n.save }}
                  </v-btn>
                </div>
              </div>
            </div>
            <v-row>
              <v-tabs grow v-model="activeTab">
                <v-tab id="case_commentsTab" href="#comments">
                  <v-icon left>fa-comments</v-icon>
                  <div class="d-none d-lg-block">{{ i18n.comments }}</div>
                </v-tab>
                <v-tab id="case_attachmentTab" href="#attachments">
                  <v-icon left>fa-paperclip</v-icon>
                  <div class="d-none d-lg-block">{{ i18n.attachments }}</div>
                </v-tab>
                <v-tab id="case_evidenceTab" href="#evidence">
                  <v-icon left>fa-eye</v-icon>
                  <div class="d-none d-lg-block">{{ i18n.evidence }}</div>
                </v-tab>
                <v-tab id="case_eventsTab" href="#events">
                  <v-icon left>fa-link</v-icon>
                  <div class="d-none d-lg-block">{{ i18n.events }}</div>
                </v-tab>
                <v-tab id="case_historyTab" href="#history">
                  <v-icon left>fa-history</v-icon>
                  <div class="d-none d-lg-block">{{ i18n.history }}</div>
                </v-tab>
  
                <v-tab-item value="comments">
                  <v-row>
                    <v-col>
                      <v-toolbar class="elevation-0" fixed>
                        <v-btn :title="i18n.addCommentHelp" color="primary" @click.stop="prepareForInput('comment-input')" id="add-comment-button">
                          <v-icon>fa-plus</v-icon>
                        </v-btn>
                        <v-btn class="mx-1" :title="i18n.refreshCommentsHelp" color="secondary" @click.stop="reloadAssociation('comments', true)" id="refresh-comments-button">
                          <v-icon>fa-sync</v-icon>
                        </v-btn>
                      </v-toolbar>
                    </v-col>
                  </v-row>  
                  <div id="comment-list">
                    <div v-for="(comment, index) in associations.comments" class="mb-8" v-if="shouldRenderAssociationRecord('comments', comment, index)">
                      <div class="d-flex flex-column align-start my-4">
                        <v-col class="d-flex flex-column align-start pt-2 pt-md-0">
                          <div class="mt-1 mt-md-3 pt-1 pb-2 px-2 contrast-bg rounded rounded-md" style="width: 100%;">
                            <div class="d-flex flex-column align-start">
                              <div class="case d-block comment-body mt-2" v-if="!isEdit(`comment-${index}`)">
                                <div class="mb-2">
                                  <div :id="`comment-${index}`" class="markdown-body" :inner-html.prop="comment.description | formatMarkdown"></div>
                                </div>
                              </div>
                              <div class="d-flex flex-column" v-if="isEdit(`comment-${index}`)" style="width: 100%;">
                                <div class="d-flex flex-column flex-sm-row align-sm-center align-self-start text-body-2 mb-1 ml-1">
                                  <a class="case markdown-icon" href="https://www.markdownguide.org/cheat-sheet/" target="_blank" :title="i18n.markdownFormattingSupported"><v-icon>fab fa-markdown</v-icon></a>
                                </div>
                                <div class="mb-3">
                                  <v-form v-model="editForm.valid" @submit.prevent>
                                    <v-textarea id="comment-desc-input" solo flat hide-details="auto" rows="5" dense color="text--black" v-model="editForm.val" class="mb-1" :rules="[rules.required]"/>
                                  </v-form>
                                  <div class="d-inline-flex justify-end">
                                    <v-btn text small color="primary" class="align-self-end" @click="stopEdit()">
                                      {{ i18n.cancel }}
                                    </v-btn>
                                    <v-btn :disabled="!editForm.valid" text small color="primary" class="align-self-end" @click="stopEdit(true)">
                                      {{ i18n.update }}
                                    </v-btn>
                                  </div>
                                </div>
                              </div>
                              <div class="d-flex flex-column flex-sm-row align-sm-center align-self-end text-body-2">
                                <div class="d-inline-flex align-center mr-1">
                                  <v-avatar color="primary" size="24" class="mr-2 d-none d-sm-inline-flex white--text">
                                    <div class="case avatar-font" :title="comment.owner">
                                      {{ $root.getAvatar(comment.owner) }}
                                    </div>
                                  </v-avatar>
                                  <div >
                                    {{ comment.owner }}
                                  </div>
                                </div>
                                <div class="mr-1 d-none d-sm-block">
                                  &bull;
                                </div>
                                <div>
                                  {{ comment.createTime | formatDateTime }}
                                </div>
                                <div v-if="isEdited(comment)" :title="$root.formatDateTime(comment.updateTime)" class="mx-sm-2">
                                  {{ i18n.edited }}
                                </div>
                                <div class="ml-1 d-flex mt-1 mt-sm-0">
                                  <v-btn text small icon color="primary" v-if="!isEdit(`comment-${index}`)" @click="startEdit('comment-desc-input', comment.description, `comment-${index}`, 'description', modifyAssociation, ['comments', comment], true)" 
                                    @keypress.space.prevent="startEdit('comment-desc-input', comment.description, `comment-${index}`, 'description', modifyAssociation, ['comments', comment], true)">
                                    <v-icon style="font-size: 14px !important;">fa-edit</v-icon>
                                  </v-btn>
                                  <v-btn text small color="red" @click="deleteAssociation('comments', comment)" icon><v-icon style="font-size: 14px !important;">fa-trash</v-icon></v-btn>
                                </div>
                              </div>
                            </div>
                          </div>
                        </v-col> 
                      </div>
                      <div v-if="shouldRenderShowAll('comments', index)" class="d-flex-block justify-center my-4 show-all">
                        <div class="d-flex justify-center">
                          <div>{{ getUnrenderedCount('comments') }} {{ i18n.hidden }} {{ i18n.comments }}</div>
                        </div>
                        <div class="d-flex justify-center">
                          <v-btn @click="renderAllAssociations('comments')">{{ i18n.showAll }}</v-btn>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex flex-column align-start my-4">
                    <v-col id="new-comment" class="d-flex flex-column align-start pt-2 pt-md-0">
                      <div class="mt-1 mt-md-3 pb-3 pt-1 contrast-bg rounded rounded-md" style="width: 100%;">
                        <div class="d-flex flex-column align-start">
                          <div class="d-inline-flex align-center mt-3 mx-2 mb-4">
                            <v-avatar color="primary" size="28" class="mr-2 white--text">
                              <div class="font-weight-bold" :title="$root.username">
                              {{ $root.getAvatar($root.username) }}
                              </div>
                            </v-avatar>
                            <h3 class="text--primary">{{ i18n.commentAdd }}</h3>
                          </div>
                          <div class="d-flex flex-column" style="width: 100%;">
                            <div class="d-flex flex-column flex-sm-row align-sm-center align-self-start text-body-2 mb-1 ml-3">
                              <a class="case markdown-icon" href="https://www.markdownguide.org/cheat-sheet/" target="_blank" :title="i18n.markdownFormattingSupported"><v-icon>fab fa-markdown</v-icon></a>
                            </div>
                            <div class="mx-2">
                              <v-form ref="comments" v-model="associatedForms['comments'].valid" @submit.prevent>
                                <v-textarea id="comment-input" solo flat hide-details="auto" rows="5" color="text--black" :value="associatedForms['comments'].description" @change="val => associatedForms['comments'].description = val" :rules="[rules.required]" class="mb-1" persistent-hint :hint="i18n.commentDescriptionHelp"/>
                              </v-form>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="d-flex align-center align-self-end text-body-2 mt-2">
                        <div class="d-inline-flex justify-end">
                          <v-btn text small color="primary" class="align-self-end" @click="resetForm('comments')">
                          {{ i18n.cancel }}
                          </v-btn>
                          <v-btn :disabled="!associatedForms['comments'].valid" text small color="primary" class="align-self-end" @click="addAssociation('comments')">
                          {{ i18n.add }}
                          </v-btn>
                        </div>
                      </div>
                    </v-col> 
                  </div>
                </v-tab-item>

                <v-tab-item value="attachments">
                  <v-row v-if="!isAdding('attachments')">
                    <v-col>
                      <v-toolbar class="elevation-0" fixed>
                        <v-btn :title="i18n.addAttachmentHelp" color="primary" @click.stop="enableAdding('attachments')" id="add-attachment-button">
                          <v-icon>fa-plus</v-icon>
                        </v-btn>
                        <v-btn class="mx-1" :title="i18n.refreshAttachmentsHelp" color="secondary" @click.stop="reloadAssociation('attachments', true)" id="refresh-attachments-button">
                          <v-icon>fa-sync</v-icon>
                        </v-btn>
                      </v-toolbar>
                    </v-col>
                  </v-row>                    
                  <v-row v-if="isAdding('attachments')">
                    <v-col>
                      <div class="ml-1 ml-md-3 py-3 px-4 contrast-bg rounded rounded-md" style="width: 100%;">
                      <div class="d-flex flex-column align-start">
                        <div class="d-flex flex-column" style="width: 100%;">
                        <div class="mb-2">
                          <div class="d-inline-flex align-center mb-3">
                            <v-avatar color="primary" size="28" class="mr-2 white--text">
                              <div class="font-weight-bold" :title="$root.username">
                              {{ $root.getAvatar($root.username) }}
                              </div>
                            </v-avatar>
                            <h3 class="text--primary">{{ i18n.attachmentAdd }}</h3>
                          </div>
                          <v-form ref="attachments" v-model="associatedForms['attachments'].valid" @submit.prevent>
                            <v-file-input id="attachments-file" show-size v-model="attachment" persistent-hint :hint="getAttachmentHelp()" :rules="[rules.fileSizeLimit, rules.fileNotEmpty]"/>
                            <v-textarea id="attachments-description" rows="2"
                            :value="associatedForms['attachments'].description" @change="val => associatedForms['attachments'].description = val"
                            :placeholder="i18n.artifactDescription" persistent-hint :hint="i18n.artifactDescriptionHelp"/>
                            <v-select id="attachments-tlp" v-if="!isPresetCustomEnabled('tlp')" v-model="associatedForms['attachments'].tlp" :items="selectList('tlp')" persistent-hint :hint="i18n.caseTlpHelp"/>
                            <v-combobox id="attachments-tlp" v-if="isPresetCustomEnabled('tlp')" v-model="associatedForms['attachments'].tlp" :items="selectList('tlp')" persistent-hint :hint="i18n.caseTlpHelp"/>
                            <v-select id="attachments-tags" v-if="!isPresetCustomEnabled('tags')" v-model="associatedForms['attachments'].tags" :items="selectList('tags')" persistent-hint :hint="i18n.caseTagsHelp" multiple>
                              <template #selection="{ item }">
                                <v-chip color="primary">{{item}}</v-chip>
                              </template>
                            </v-select>
                            <v-combobox id="attachments-tags" v-if="isPresetCustomEnabled('tags')" v-model="associatedForms['attachments'].tags" :items="selectList('tags')" persistent-hint :hint="i18n.caseTagsHelp" multiple>
                              <template #selection="{ item }">
                                <v-chip color="primary">{{item}}</v-chip>
                              </template>
                            </v-combobox>                              
                          </v-form>
                        </div>
                        </div>
                      </div>
                      </div>
                      <div class="d-flex align-center align-self-end text-body-2 mt-2">
                      <div class="d-inline-flex justify-end">
                        <v-btn id="attachment-cancel" text small color="primary" class="align-self-end" @click="resetForm('attachments')">
                          {{ i18n.cancel }}
                        </v-btn>
                        <v-btn id="attachment-add" :disabled="!associatedForms['attachments'].valid" text small color="primary" class="align-self-end" @click="addAssociation('attachments', {'groupType': 'attachments', 'artifactType':'file'})">
                          {{ i18n.add }}
                        </v-btn>
                      </div>
                      </div>
                    </v-col>
                  </v-row>   
                  <v-text-field v-model="associatedTable['attachments'].search" clearable prepend-icon="fa-filter" :label="i18n.filterResults" single-line hide-details></v-text-field>
                  <v-data-table ref="attachmentsTable" :sort-by.sync="associatedTable['attachments'].sortBy" :sort-desc.sync="associatedTable['attachments'].sortDesc" :items-per-page.sync="associatedTable['attachments'].itemsPerPage" 
                    :search="associatedTable['attachments'].search" :footer-props="associatedTable['attachments'].footerProps" must-sort :headers="associatedTable['attachments'].headers"
                    :items="associations['attachments']" item-key="id" :loading="associatedTable['attachments'].loading" :expanded="associatedTable['attachments'].expanded" class="case-table">
                    <template v-slot:item="props">
                      <tr>
                        <td class="associated actions">
                          <v-btn :id="`attachments-${props.index}-expand`" icon small @click="expandRow('attachments', props.item)">
                            <v-icon v-if="isExpanded('attachments', props.item)" :alt="i18n.expand" :title="i18n.expandHelp">fa-angle-down</v-icon>
                            <v-icon v-if="!isExpanded('attachments', props.item)" :alt="i18n.expand" :title="i18n.expandHelp">fa-angle-right</v-icon>
                          </v-btn>
                        </td>                          
                        <td class="associated">{{ props.item.createTime | formatDateTime }}</td>
                        <td class="associated">{{ props.item.updateTime | formatDateTime }}</td>
                        <td class="associated">{{ props.item.value }}</td>
                      </tr>
                    </template>
                    <template v-slot:expanded-item="props">
                      <tr>
                        <td :colspan="4" class="case">
                          <v-container fluid class="py-1">
                            <a target="soc-download" :href="`/api/case/artifactstream?id=${props.item.id}`" class="no-underline">
                              <v-icon>fa-download</v-icon>
                              {{ props.item.value }}
                              ({{ props.item.streamLength | formatCount }} 
                              {{ i18n.bytes }})
                            </a>
                            <div class="mt-4">
                              <div class="font-weight-bold">{{i18n.sha256}}: </div>
                              <div :id="`attachments-${props.index}-sha256`" class="case">
                                {{ withDefault(props.item.sha256, i18n.unknown) }}
                                <v-icon class="ml-1" @click="$root.copyToClipboard(props.item.sha256)" :title="i18n.copyToClipboard">fa-copy</v-icon>
                                <v-icon class="ml-1" @click="populateAddObservableForm('sha256', props.item.sha256)" :title="i18n.addObservable">fa-eye</v-icon>
                              </div>
                            </div>
                            <div class="mt-2">
                              <div class="font-weight-bold">{{i18n.sha1}}: </div>
                              <div :id="`attachments-${props.index}-sha1`" class="case">
                                {{ withDefault(props.item.sha1, i18n.unknown) }}
                                <v-icon class="ml-1" @click="$root.copyToClipboard(props.item.sha1)" :title="i18n.copyToClipboard">fa-copy</v-icon>
                                <v-icon class="ml-1" @click="populateAddObservableForm('sha1', props.item.sha1)" :title="i18n.addObservable">fa-eye</v-icon>
                              </div>
                            </div>
                            <div class="mt-2">
                              <div class="font-weight-bold">{{i18n.md5}}: </div>
                              <div :id="`attachments-${props.index}-md5`" class="case">
                                {{ withDefault(props.item.md5, i18n.unknown) }}
                                <v-icon class="ml-1" @click="$root.copyToClipboard(props.item.md5)" :title="i18n.copyToClipboard">fa-copy</v-icon>
                                <v-icon class="ml-1" @click="populateAddObservableForm('md5', props.item.md5)" :title="i18n.addObservable">fa-eye</v-icon>
                              </div>
                            </div>
                          </v-container>
                          <v-container fluid class="pt-2 pb-0">
                            <div tabindex="0" class="clicktoedit" @click="startEdit(`attachments-${props.index}-description-input`, props.item.description, `attachments-${props.index}-description`, 'description', modifyAssociation, ['attachments', props.item], true)"
                              @keypress.space.prevent="startEdit(`attachments-${props.index}-description-input`, props.item.description, `attachments-${props.index}-description`, 'description', modifyAssociation, ['attachments', props.item], true)">
                              <div class="font-weight-bold">{{i18n.artifactDescription}}: </div>
                              <div :id="`attachments-${props.index}-description`" class="case detail-field markdown-body" v-if="!isEdit(`attachments-${props.index}-description`)" :inner-html.prop="props.item.description | formatMarkdown"></div>
                            </div>
                            <div class="d-flex flex-column" v-if="isEdit(`attachments-${props.index}-description`)">
                              <v-form v-model="editForm.valid" @submit.prevent>
                                <div class="mb-2">
                                  <v-textarea full-width rows="3" multiline :id="`attachments-${props.index}-description-input`" hide-details="auto" outlined v-model="editForm.val" persistent-hint :hint="i18n.artifactDescriptionHelp"/>
                                </div>
                              </v-form>
                              <div class="d-inline-flex justify-end">
                                <v-btn text small color="primary" class="align-self-end" @click="stopEdit()">
                                  {{ i18n.cancel }}
                                </v-btn>
                                <v-btn :disabled="!editForm.valid" text small color="primary" class="align-self-end" @click="stopEdit(true)">
                                  {{ i18n.save }}
                                </v-btn>
                              </div>
                            </div>
                          </v-container>
                          <v-container fluid class="py-2">
                            <div tabindex="0" class="clicktoedit" @click="startEdit(`attachments-${props.index}-tlp-input`, props.item.tlp, `attachments-${props.index}-tlp`, 'tlp', modifyAssociation, ['attachments', props.item])"
                              @keypress.space.prevent="startEdit(`attachments-${props.index}-tlp-input`, props.item.tlp, `attachments-${props.index}-tlp`, 'tlp', modifyAssociation, ['attachments', props.item])">
                              <div class="font-weight-bold">{{i18n.caseTlp}}: </div>
                              <v-chip :id="`attachments-${props.index}-tlp`" :color="colorizeChip(props.item.tlp)" outlined v-if="!isEdit(`attachments-${props.index}-tlp`)">{{ withDefault(props.item.tlp, i18n.unknown) }}</v-chip>
                            </div>
                            <v-select :id="`attachments-${props.index}-tlp-input`" v-if="isEdit(`attachments-${props.index}-tlp`) && !isPresetCustomEnabled('tlp')"
                              dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseTlpHelp"
                              v-model="editForm.val"
                              :items="selectList('tlp', props.item.tlp)"
                              v-on:change="stopEdit(true)"
                              />
                              <v-combobox :id="`attachments-${props.index}-tlp-input`" v-if="isEdit(`attachments-${props.index}-tlp`) && isPresetCustomEnabled('tlp')"
                                dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseTlpHelp"
                                v-model="editForm.val"
                                :items="selectList('tlp', props.item.tlp)"
                                v-on:change="stopEdit(true)"
                              />
                            </v-select>
                          </v-container>
                          <v-container fluid class="py-2">
                            <div tabindex="0" class="clicktoedit" @click="startEdit(`attachments-${props.index}-tags-input`, props.item.tags, `attachments-${props.index}-tags`, 'tags', modifyAssociation, ['attachments', props.item])"
                              @keypress.space.prevent="startEdit(`attachments-${props.index}-tags-input`, props.item.tags, `attachments-${props.index}-tags`, 'tags', modifyAssociation, ['attachments', props.item])">
                              <div class="font-weight-bold">{{i18n.caseTags}}: </div>
                              <div :id="`attachments-${props.index}-tags`" class="case detail-field mt-1" v-if="!isEdit(`attachments-${props.index}-tags`)">
                                <v-chip class="mx-1" v-for="tag in props.item.tags" color="primary">{{ tag }}</v-chip>
                              </div>
                            </div>
                            <v-select :id="`attachments-${props.index}-tags-input`" v-if="isEdit(`attachments-${props.index}-tags`) && !isPresetCustomEnabled('tags')"
                              dense eager outlined hide-details="auto" class="case-select" multiple persistent-hint :hint="i18n.caseTagsHelp"
                              v-model="editForm.val"
                              :items="selectList('tags', props.item.tags)"
                              v-on:change="stopEdit(true)">
                              <template #selection="{ item }">
                                <v-chip color="primary">{{item}}</v-chip>
                              </template>
                            </v-select>
                            <v-combobox :id="`attachments-${props.index}-tags-input`" v-if="isEdit(`attachments-${props.index}-tags`) && isPresetCustomEnabled('tags')"
                              dense eager outlined hide-details="auto" class="case-select" multiple persistent-hint :hint="i18n.caseTagsHelp"
                              v-model="editForm.val"
                              :items="selectList('tags', props.item.tags)"
                              v-on:change="stopEdit(true)">
                              <template #selection="{ item }">
                                <v-chip color="primary">{{item}}</v-chip>
                              </template>
                            </v-combobox>
                          </v-container>

                          <div class="d-flex flex-column flex-sm-row align-end align-sm-center align-self-end text-body-2">
                            <v-spacer/>
                            <v-avatar color="primary" size="24" class="mr-2 d-none d-sm-inline-flex white--text">
                              <div class="case avatar-font" :title="props.item.owner">
                                {{ $root.getAvatar(props.item.owner) }}
                              </div>
                            </v-avatar>
                            <div class="mr-1">
                              {{ props.item.owner }}
                            </div>
                            <div class="mr-1 d-none d-sm-block">
                              &bull;
                            </div>
                            <div>
                              {{ props.item.createTime | formatDateTime }}
                            </div>
                            <div v-if="isEdited(props.item)" :title="$root.formatDateTime(props.item.updateTime)" class="mx-2">
                              {{ i18n.edited }}
                            </div>
                            <div class="ml-1 d-flex">
                              <v-btn text small color="red" @click="deleteAssociation('attachments', props.item)" icon><v-icon style="font-size: 14px !important;">fa-trash</v-icon></v-btn>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </template>
                    <template v-slot:no-results>
                      <v-alert :value="true" color="info" icon="fa-info">
                        {{ i18n.noSearchResults }}
                      </v-alert>
                    </template>
                  </v-data-table>
                  <div class="text-xs-center pt-2 d-none">
                      <v-btn v-text="i18n.loadMore" @click="loadAssociation('attachments')"></v-btn>
                  </div>               
                </v-tab-item>

                <v-tab-item value="evidence">
                  <v-row v-if="!isAdding('evidence')">
                    <v-col>
                      <v-toolbar class="elevation-0" fixed>
                        <v-btn :title="i18n.addObservableHelp" color="primary" @click.stop="enableAdding('evidence')" id="add-evidence-button">
                          <v-icon>fa-plus</v-icon>
                        </v-btn>
                        <v-btn class="mx-1" :title="i18n.refreshObservablesHelp" color="secondary" @click.stop="reloadAssociation('evidence', true)" id="refresh-observables-button">
                          <v-icon>fa-sync</v-icon>
                        </v-btn>
                      </v-toolbar>
                    </v-col>
                  </v-row>                    
                  <v-row v-if="isAdding('evidence')">
                    <v-col>
                      <div class="ml-1 ml-md-3 py-3 px-4 contrast-bg rounded rounded-md" style="width: 100%;">
                      <div class="d-flex flex-column align-start">
                        <div class="d-flex flex-column" style="width: 100%;">
                        <div class="mb-2">
                          <div class="d-inline-flex align-center mb-3">
                            <v-avatar color="primary" size="28" class="mr-2 white--text">
                              <div class="font-weight-bold" :title="$root.username">
                              {{ $root.getAvatar($root.username) }}
                              </div>
                            </v-avatar>
                            <h3 class="text--primary">{{ i18n.evidenceAdd }}</h3>
                          </div>
                          <v-form ref="evidence" v-model="associatedForms['evidence'].valid" @submit.prevent>
                            <v-select id="evidence-type" v-if="!isPresetCustomEnabled('artifactType')" v-model="associatedForms['evidence'].artifactType" :items="selectList('artifactType')" persistent-hint :hint="i18n.artifactTypeHelp"/>
                            <v-combobox id="evidence-type" v-if="isPresetCustomEnabled('artifactType')" v-model="associatedForms['evidence'].artifactType" :items="selectList('artifactType')" persistent-hint :hint="i18n.artifactTypeHelp"/>
                            <v-file-input id="evidence-value" v-if="associatedForms['evidence'].artifactType == 'file'" show-size v-model="attachment" persistent-hint :hint="getAttachmentHelp()" :rules="[rules.fileSizeLimit, rules.fileNotEmpty, rules.fileRequired]"/>
                            <v-textarea id="evidence-value" v-if="associatedForms['evidence'].artifactType != 'file'" rows="2" :value="associatedForms['evidence'].value" @change="val => associatedForms['evidence'].value = val" :rules="[rules.required]" :placeholder="i18n.artifactValue" persistent-hint :hint="i18n.artifactValueHelp"/>
                            <v-checkbox v-if="isEvidenceBulkCapable()" id="evidence-bulk" v-model="associatedForms['evidence'].bulk" persistent-hint :hint="i18n.artifactBulkHelp"/>
                            <v-textarea id="evidence-description" rows="2" :value="associatedForms['evidence'].description" @change="val => associatedForms['evidence'].description = val" :placeholder="i18n.artifactDescription" persistent-hint :hint="i18n.artifactDescriptionHelp"/>
                            <v-checkbox id="evidence-ioc" v-model="associatedForms['evidence'].ioc" persistent-hint :hint="i18n.artifactIocHelp"/>
                            <v-select id="evidence-tlp" v-if="!isPresetCustomEnabled('tlp')" v-model="associatedForms['evidence'].tlp" :items="selectList('tlp')" persistent-hint :hint="i18n.caseTlpHelp"/>
                            <v-combobox id="evidence-tlp" v-if="isPresetCustomEnabled('tlp')" v-model="associatedForms['evidence'].tlp" :items="selectList('tlp')" persistent-hint :hint="i18n.caseTlpHelp"/>
                            <v-select id="evidence-tags" v-if="!isPresetCustomEnabled('tags')" v-model="associatedForms['evidence'].tags" :items="selectList('tags')" persistent-hint :hint="i18n.caseTagsHelp" multiple>
                              <template #selection="{ item }">
                                <v-chip color="primary">{{item}}</v-chip>
                              </template>
                            </v-select>
                            <v-combobox id="evidence-tags" v-if="isPresetCustomEnabled('tags')" v-model="associatedForms['evidence'].tags" :items="selectList('tags')" persistent-hint :hint="i18n.caseTagsHelp" multiple>
                              <template #selection="{ item }">
                                <v-chip color="primary">{{item}}</v-chip>
                              </template>
                            </v-combobox>                              
                          </v-form>
                        </div>
                        </div>
                      </div>
                      </div>
                      <div class="d-flex align-center align-self-end text-body-2 mt-2">
                      <div class="d-inline-flex justify-end">
                        <v-btn id="evidence-cancel" text small color="primary" class="align-self-end" @click="resetForm('evidence')">
                          {{ i18n.cancel }}
                        </v-btn>
                        <v-btn id="evidence-add" :disabled="!associatedForms['evidence'].valid" text small color="primary" class="align-self-end" @click="addAssociation('evidence', {'groupType': 'evidence'})">
                          {{ i18n.add }}
                        </v-btn>
                      </div>
                      </div>
                    </v-col>
                  </v-row>  
                  <v-text-field v-model="associatedTable['evidence'].search" clearable prepend-icon="fa-filter" :label="i18n.filterResults" single-line hide-details></v-text-field>
                  <v-data-table ref="evidenceTable" :sort-by.sync="associatedTable['evidence'].sortBy" :sort-desc.sync="associatedTable['evidence'].sortDesc" :items-per-page.sync="associatedTable['evidence'].itemsPerPage" 
                    :search="associatedTable['evidence'].search" :footer-props="associatedTable['evidence'].footerProps" must-sort :headers="associatedTable['evidence'].headers"
                    :items="associations['evidence']" item-key="id" :loading="associatedTable['evidence'].loading" :expanded="associatedTable['evidence'].expanded" class="case-table">
                    <template v-slot:item="props">
                      <tr>
                        <td class="association actions">
                          <v-btn :id="`evidence-${props.index}-expand`" icon small @click="expandRow('evidence', props.item)">
                            <v-icon v-if="isExpanded('evidence', props.item)" :alt="i18n.expand" :title="i18n.expandHelp">fa-angle-down</v-icon>
                            <v-icon v-if="!isExpanded('evidence', props.item)" :alt="i18n.expand" :title="i18n.expandHelp">fa-angle-right</v-icon>
                          </v-btn>
                          <router-link class="no-underline" :to="{ name: 'hunt', query: {q: buildHuntQueryForValue(props.item.value)}}" :title="i18n.huntForEvidence">
                            <v-icon :title="i18n.huntForEvidence">fa-crosshairs</v-icon>
                          </router-link>
                          <v-btn :id="`evidence-${props.index}-analyze`" icon small @click="analyze(props.item)" :disabled="analyzeInProgress(props.item)">
                            <v-icon v-if="analyzeInProgress(props.item)" :alt="i18n.analyzeInProgress" :title="i18n.analyzeHelp">fa-clock</v-icon>
                            <v-icon v-if="!analyzeInProgress(props.item)" :alt="i18n.analyze" :title="i18n.analyzeHelp">fa-bolt</v-icon>
                          </v-btn>                          
                        </td>                        
                        <td class="associated">{{ props.item.createTime | formatDateTime }}</td>
                        <td class="associated">{{ props.item.updateTime | formatDateTime }}</td>
                        <td class="associated">{{ props.item.artifactType }}</td>
                        <td class="associated">{{ props.item.value }}</td>
                      </tr>
                    </template>
                    <template v-slot:expanded-item="props">
                      <tr>
                        <td :colspan="5" class="case">
                          <v-container fluid class="my-2" v-if="props.item.artifactType == 'file'">
                            <a target="soc-download" :href="`/api/case/artifactstream?id=${props.item.id}`" class="no-underline">
                              <v-icon>fa-download</v-icon>
                              {{ props.item.value }}
                              ({{ props.item.streamLength | formatCount }} 
                              {{ i18n.bytes }})
                            </a>
                            <div class="mt-4">
                              <div class="font-weight-bold">{{i18n.sha256}}: </div>
                              <div :id="`evidence-${props.index}-sha256`" class="case">
                                {{ withDefault(props.item.sha256, i18n.unknown) }}
                                <v-icon class="ml-1" @click="$root.copyToClipboard(props.item.sha256)" :title="i18n.copyToClipboard">fa-copy</v-icon>
                              </div>
                            </div>
                            <div class="mt-2">
                              <div class="font-weight-bold">{{i18n.sha1}}: </div>
                              <div :id="`evidence-${props.index}-sha1`" class="case">
                                {{ withDefault(props.item.sha1, i18n.unknown) }}
                                <v-icon class="ml-1" @click="$root.copyToClipboard(props.item.sha1)" :title="i18n.copyToClipboard">fa-copy</v-icon>
                              </div>
                            </div>
                            <div class="mt-2">
                              <div class="font-weight-bold">{{i18n.md5}}: </div>
                              <div :id="`evidence-${props.index}-md5`" class="case">
                                {{ withDefault(props.item.md5, i18n.unknown) }}
                                <v-icon class="ml-1" @click="$root.copyToClipboard(props.item.md5)" :title="i18n.copyToClipboard">fa-copy</v-icon>
                              </div>
                            </div>
                          </v-container>
                          <v-container fluid class="pt-2 pb-0" v-if="props.item.artifactType != 'file'">
                            <div>
                              <div class="font-weight-bold">{{i18n.artifactValue}}: </div>
                              <div :id="`evidence-${props.index}-value`" class="case detail-field">{{ props.item.value }}></div>
                            </div>
                          </v-container>
                          <v-container fluid class="pt-2 pb-0">
                            <div tabindex="0" class="clicktoedit" @click="startEdit(`evidence-${props.index}-description-input`, props.item.description, `evidence-${props.index}-description`, 'description', modifyAssociation, ['evidence', props.item], true)"
                              @keypress.space.prevent="startEdit(`evidence-${props.index}-description-input`, props.item.description, `evidence-${props.index}-description`, 'description', modifyAssociation, ['evidence', props.item], true)">
                              <div class="font-weight-bold">{{i18n.artifactDescription}}: </div>
                              <div :id="`evidence-${props.index}-description`" class="case detail-field markdown-body" v-if="!isEdit(`evidence-${props.index}-description`)" :inner-html.prop="props.item.description | formatMarkdown"></div>
                            </div>
                            <div class="d-flex flex-column" v-if="isEdit(`evidence-${props.index}-description`)">
                              <v-form v-model="editForm.valid" @submit.prevent>
                                <div class="mb-2">
                                  <v-textarea full-width rows="3" multiline :id="`evidence-${props.index}-description-input`" hide-details="auto" outlined v-model="editForm.val" persistent-hint :hint="i18n.artifactDescriptionHelp"/>
                                </div>
                              </v-form>
                              <div class="d-inline-flex justify-end">
                                <v-btn text small color="primary" class="align-self-end" @click="stopEdit()">
                                  {{ i18n.cancel }}
                                </v-btn>
                                <v-btn :disabled="!editForm.valid" text small color="primary" class="align-self-end" @click="stopEdit(true)">
                                  {{ i18n.save }}
                                </v-btn>
                              </div>
                            </div>
                          </v-container>
                          <v-container fluid class="py-2">
                            <div tabindex="0" class="clicktoedit" @click="startEdit(`evidence-${props.index}-ioc-input`, props.item.ioc, `evidence-${props.index}-ioc`, 'ioc', modifyAssociation, ['evidence', props.item])"
                              @keypress.space.prevent="startEdit(`evidence-${props.index}-ioc-input`, props.item.ioc, `evidence-${props.index}-ioc`, 'ioc', modifyAssociation, ['evidence', props.item])">
                              <div class="font-weight-bold">{{i18n.artifactIoc}}: </div>
                              <div :id="`evidence-${props.index}-ioc`" class="case detail-field" v-if="!isEdit(`evidence-${props.index}-ioc`)">{{ props.item.ioc ? i18n.yes : i18n.no }}</div>
                            </div>
                            <v-checkbox :id="`evidence-${props.index}-ioc-input`" v-if="isEdit(`evidence-${props.index}-ioc`)" v-model="editForm.val" v-on:change="stopEdit(true)" persistent-hint :hint="i18n.artifactIocHelp"/>
                          </v-container>
                          <v-container fluid class="py-2">
                            <div tabindex="0" class="clicktoedit" @click="startEdit(`evidence-${props.index}-tlp-input`, props.item.tlp, `evidence-${props.index}-tlp`, 'tlp', modifyAssociation, ['evidence', props.item])"
                              @keypress.space.prevent="startEdit(`evidence-${props.index}-tlp-input`, props.item.tlp, `evidence-${props.index}-tlp`, 'tlp', modifyAssociation, ['evidence', props.item])">
                              <div class="font-weight-bold">{{i18n.caseTlp}}: </div>
                              <v-chip :id="`evidence-${props.index}-tlp`" :color="colorizeChip(props.item.tlp)" outlined v-if="!isEdit(`evidence-${props.index}-tlp`)">{{ withDefault(props.item.tlp, i18n.unknown) }}</v-chip>
                            </div>
                            <v-select :id="`evidence-${props.index}-tlp-input`" v-if="isEdit(`evidence-${props.index}-tlp`) && !isPresetCustomEnabled('tlp')"
                              dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseTlpHelp"
                              v-model="editForm.val"
                              :items="selectList('tlp', props.item.tlp)"
                              v-on:change="stopEdit(true)"
                              />
                              <v-combobox :id="`evidence-${props.index}-tlp-input`" v-if="isEdit(`evidence-${props.index}-tlp`) && isPresetCustomEnabled('tlp')"
                                dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseTlpHelp"
                                v-model="editForm.val"
                                :items="selectList('tlp', props.item.tlp)"
                                v-on:change="stopEdit(true)"
                              />
                            </v-select>
                          </v-container>
                          <v-container fluid class="py-2">
                            <div tabindex="0" class="clicktoedit" @click="startEdit(`evidence-${props.index}-tags-input`, props.item.tags, `evidence-${props.index}-tags`, 'tags', modifyAssociation, ['evidence', props.item])"
                              @keypress.space.prevent="startEdit(`evidence-${props.index}-tags-input`, props.item.tags, `evidence-${props.index}-tags`, 'tags', modifyAssociation, ['evidence', props.item])">
                              <div class="font-weight-bold">{{i18n.caseTags}}: </div>
                              <div :id="`evidence-${props.index}-tags`" class="case detail-field mt-1" v-if="!isEdit(`evidence-${props.index}-tags`)">
                                <v-chip class="mx-1" v-for="tag in props.item.tags" color="primary">{{ tag }}</v-chip>
                              </div>
                            </div>
                            <v-select :id="`evidence-${props.index}-tags-input`" v-if="isEdit(`evidence-${props.index}-tags`) && !isPresetCustomEnabled('tags')"
                              dense eager outlined hide-details="auto" class="case-select" multiple persistent-hint :hint="i18n.caseTagsHelp"
                              v-model="editForm.val"
                              :items="selectList('tags', props.item.tags)"
                              v-on:change="stopEdit(true)">
                              <template #selection="{ item }">
                                <v-chip color="primary">{{item}}</v-chip>
                              </template>
                            </v-select>
                            <v-combobox :id="`evidence-${props.index}-tags-input`" v-if="isEdit(`evidence-${props.index}-tags`) && isPresetCustomEnabled('tags')"
                              dense eager outlined hide-details="auto" class="case-select" multiple persistent-hint :hint="i18n.caseTagsHelp"
                              v-model="editForm.val"
                              :items="selectList('tags', props.item.tags)"
                              v-on:change="stopEdit(true)">
                              <template #selection="{ item }">
                                <v-chip color="primary">{{item}}</v-chip>
                              </template>
                            </v-combobox>
                          </v-container>

                          <v-container :id="`evidence-${props.index}-analyze-container`" fluid class="py-2" v-if="getAnalyzeJobs(props.item)">
                            <div>
                              <div class="font-weight-bold">{{i18n.analyzeJobs}}: </div>
                              <v-expansion-panels class="mb-6" hover="true" multiple="true">
                                <v-expansion-panel v-for="job in getAnalyzeJobs(props.item)" :id="`evidence-${props.index}-analyze-job-${job.id}`" >
                                  <v-expansion-panel-header disable-icon-rotate>
                                    <v-row>
                                      <v-col cols="12" md="4">
                                        {{ i18n.job }}: {{ job.id }} 
                                      </v-col>
                                      <v-col cols="12" md="4">
                                        {{ job.createTime | formatDateTime }} 
                                      </v-col>
                                      <v-col cols="12" md="4">
                                        {{ i18n.analyzers }}: {{ getAnalyzersInJob(job) }}
                                      </v-col>
                                    </v-row>
                                    <template v-slot:actions>
                                      <v-icon v-if="job.status == JobStatusPending" color="info">fa-clock</v-icon>
                                      <v-icon v-if="job.status == JobStatusCompleted" :title="$root.localizeMessage(getAnalyzeJobDecoration(job).help)" :color="getAnalyzeJobDecoration(job).color">{{ getAnalyzeJobDecoration(job).icon }}</v-icon>
                                      <v-icon v-if="job.status == JobStatusIncomplete" color="error">fa-exclamation</v-icon>
                                    </template>
                                  </v-expansion-panel-header>
                                  <v-expansion-panel-content>

                                    <v-expansion-panels class="mb-1" flat>
                                      <div class="my-4" v-if="job.status == JobStatusCompleted && !job.results">
                                        {{ i18n.analyzersUnavailable }}
                                      </div>
                                      <v-expansion-panel v-for="analyzer in job.results" :id="`evidence-${props.index}-analyze-job-${job.id}`" >
                                        <v-expansion-panel-header>
                                          <v-row>
                                            <v-col cols="12" md="3" class="font-weight-bold">
                                              {{ analyzer.id }}
                                            </v-col>
                                            <v-col cols="12" md="6">
                                              <v-icon class="mr-2" :title="$root.localizeMessage(getAnalyzerDecoration(analyzer).help)" :color="getAnalyzerDecoration(analyzer).color">{{ getAnalyzerDecoration(analyzer).icon }}</v-icon>
                                              {{ getAnalyzerSummary(analyzer) }}
                                            </v-col>
                                            <v-col cols="12" md="3">
                                              {{ i18n.bytes }}: {{ JSON.stringify(analyzer.data).length | formatCount }}
                                            </v-col>
                                          </v-row>
                                        </v-expansion-panel-header>
                                        <v-expansion-panel-content>
                                          <pre class="hardwrap">{{ analyzer.data }}</pre>
                                        </v-expansion-panel-content>
                                      </v-expansion-panel>
                                    </v-expansion-panels>

                                    <div class="d-flex flex-column flex-sm-row align-end align-sm-center align-self-end text-body-2">
                                      <v-avatar color="primary" size="24" class="mr-2 d-none d-sm-inline-flex white--text">
                                        <div class="case avatar-font" :title="job.owner">
                                          {{ $root.getAvatar(job.owner) }}
                                        </div>
                                      </v-avatar>
                                      <div class="mr-1">
                                        {{ job.owner }}
                                      </div>
                                      <div class="mr-1 d-none d-sm-block">
                                        &bull;
                                      </div>
                                      <div>
                                        {{ job.completeTime | formatDateTime }}
                                      </div>
                                      <div class="ml-1 d-flex">
                                        <v-btn text small color="red" @click="deleteAnalyzeJob(job)" icon><v-icon style="font-size: 14px !important;">fa-trash</v-icon></v-btn>
                                      </div>
                                      <v-spacer/>
                                    </div>
                                    
                                  </v-expansion-panel-content>
                                </v-expansion-panel>
                              </v-expansion-panels>
                            </div>
                          </v-container>

                          <div class="d-flex flex-column flex-sm-row align-end align-sm-center align-self-end text-body-2">
                            <v-spacer/>
                            <v-avatar color="primary" size="24" class="mr-2 d-none d-sm-inline-flex white--text">
                              <div class="case avatar-font" :title="props.item.owner">
                                {{ $root.getAvatar(props.item.owner) }}
                              </div>
                            </v-avatar>
                            <div class="mr-1">
                              {{ props.item.owner }}
                            </div>
                            <div class="mr-1 d-none d-sm-block">
                              &bull;
                            </div>
                            <div>
                              {{ props.item.createTime | formatDateTime }}
                            </div>
                            <div v-if="isEdited(props.item)" :title="$root.formatDateTime(props.item.updateTime)" class="mx-2">
                              {{ i18n.edited }}
                            </div>
                            <div class="ml-1 d-flex">
                              <v-btn text small color="red" @click="deleteAssociation('evidence', props.item)" icon><v-icon style="font-size: 14px !important;">fa-trash</v-icon></v-btn>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </template>
                    <template v-slot:no-results>
                      <v-alert :value="true" color="info" icon="fa-info">
                        {{ i18n.noSearchResults }}
                      </v-alert>
                    </template>
                  </v-data-table>
                  <div class="text-xs-center pt-2 d-none">
                      <v-btn v-text="i18n.loadMore" @click="loadAssociation('evidence')"></v-btn>
                  </div>                
                </v-tab-item>

                <v-tab-item value="events">
                  <v-row>
                    <v-col>
                      <v-toolbar class="elevation-0" fixed>
                        <v-btn :title="i18n.refreshEventsHelp" color="secondary" @click.stop="reloadAssociation('events', true)" id="refresh-events-button">
                          <v-icon>fa-sync</v-icon>
                        </v-btn>
                      </v-toolbar>
                    </v-col>
                  </v-row>                   
                  <v-text-field v-model="associatedTable['events'].search" clearable prepend-icon="fa-filter" :label="i18n.filterResults" single-line hide-details></v-text-field>
                  <v-data-table ref="eventsTable" :sort-by.sync="associatedTable['events'].sortBy" :sort-desc.sync="associatedTable['events'].sortDesc" :items-per-page.sync="associatedTable['events'].itemsPerPage" 
                    :search="associatedTable['events'].search" :footer-props="associatedTable['events'].footerProps" must-sort :headers="associatedTable['events'].headers"
                    :items="associations['events']" item-key="id" :loading="associatedTable['events'].loading" :expanded="associatedTable['events'].expanded" class="case-table">
                    <template v-slot:item="props">
                      <tr>
                        <td class="associated actions">
                          <v-btn :id="`events-${props.index}-expand`" icon small @click="expandRow('events', props.item)">
                            <v-icon v-if="isExpanded('events', props.item)" :alt="i18n.expand" :title="i18n.expandHelp">fa-angle-down</v-icon>
                            <v-icon v-if="!isExpanded('events', props.item)" :alt="i18n.expand" :title="i18n.expandHelp">fa-angle-right</v-icon>
                          </v-btn>
                          <router-link class="no-underline" :to="{ name: 'hunt', query: {q: buildHuntQuery(props.item)}}" :title="i18n.huntForEvent" v-if="props.item.fields['soc_id']">
                            <v-icon :title="i18n.huntForEvent">fa-crosshairs</v-icon>
                          </router-link>
                        </td>
                        <td class="associated">{{ props.item.fields["soc_timestamp"] | formatTimestamp }}</td>
                        <td class="associated">{{ getEventId(props.item) }}</td>
                        <td class="associated">{{ props.item.fields['event.category'] }}</td>
                        <td class="associated">{{ props.item.fields['event.module'] }}</td>                        
                        <td class="associated">{{ props.item.fields['event.dataset'] }}</td>
                      </tr>
                    </template>
                    <template v-slot:expanded-item="props">
                      <tr>
                        <td :colspan="6" class="case">
                          <div class="mt-2">
                            <v-row no-gutters class="py-1 case tabular-row" v-for="value, key in props.item.fields" v-if="!key.startsWith(internalPrefix)">
                              <v-col cols="1">
                                <v-btn :id="`events-${props.index}-addobservable`" icon small @click="populateAddObservableForm(key, value)">
                                  <v-icon :title="i18n.addObservable">fa-eye</v-icon>
                                </v-btn>
                                <router-link class="no-underline" :to="{ name: 'hunt', query: {q: buildHuntQueryForValue(value) }}">
                                  <v-icon :title="i18n.huntForFieldValue">fa-crosshairs</v-icon>
                                </router-link>
                              </v-col>
                              <v-col cols="4"><span class="case tabular-label">{{ key }}:</span></v-col>
                              <v-col cols="7"><span class="case">{{ value }}</span></v-col>
                            </v-row>
                          </div>

                          <div class="d-flex flex-column flex-sm-row align-end align-sm-center align-self-end text-body-2">
                            <v-spacer/>
                            <v-avatar color="primary" size="24" class="mr-2 d-none d-sm-inline-flex white--text">
                              <div class="case avatar-font" :title="props.item.owner">
                                {{ $root.getAvatar(props.item.owner) }}
                              </div>
                            </v-avatar>
                            <div class="mr-1">
                              {{ props.item.owner }}
                            </div>
                            <div class="mr-1 d-none d-sm-block">
                              &bull;
                            </div>
                            <div>
                              {{ props.item.createTime | formatDateTime }}
                            </div>
                            <div class="ml-1 d-flex">
                              <v-btn text small color="red" @click="deleteAssociation('events', props.item)" icon><v-icon style="font-size: 14px !important;">fa-trash</v-icon></v-btn>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </template>
                    <template v-slot:no-results>
                      <v-alert :value="true" color="info" icon="fa-info">
                        {{ i18n.noSearchResults }}
                      </v-alert>
                    </template>
                  </v-data-table>
                  <div class="text-xs-center pt-2 d-none">
                      <v-btn v-text="i18n.loadMore" @click="loadAssociation('events')"></v-btn>
                  </div>
                </v-tab-item>
  
                <v-tab-item value="history">
                  <v-row>
                    <v-col>
                      <v-toolbar class="elevation-0" fixed>
                        <v-btn :title="i18n.refreshHistoryHelp" color="secondary" @click.stop="reloadAssociation('history', true)" id="refresh-history-button">
                          <v-icon>fa-sync</v-icon>
                        </v-btn>
                      </v-toolbar>
                    </v-col>
                  </v-row>                    
                  <v-text-field v-model="associatedTable['history'].search" clearable prepend-icon="fa-filter" :label="i18n.filterResults" single-line hide-details></v-text-field>
                  <v-data-table ref="historyTable" :sort-by.sync="associatedTable['history'].sortBy" :sort-desc.sync="associatedTable['history'].sortDesc" :items-per-page.sync="associatedTable['history'].itemsPerPage" 
                    :search="associatedTable['history'].search" :footer-props="associatedTable['history'].footerProps" must-sort :headers="associatedTable['history'].headers"
                    :items="associations['history']" item-key="id" :loading="associatedTable['history'].loading" :expanded="associatedTable['history'].expanded" class="case-table">
                    <template v-slot:item="props">
                      <tr>
                        <td class="associated actions">
                          <v-btn :id="`history-${props.index}-expand`" icon small @click="expandRow('history', props.item)">
                            <v-icon v-if="isExpanded('history', props.item)" :alt="i18n.expand" :title="i18n.expandHelp">fa-angle-down</v-icon>
                            <v-icon v-if="!isExpanded('history', props.item)" :alt="i18n.expand" :title="i18n.expandHelp">fa-angle-right</v-icon>
                          </v-btn>
                        </td>
                        <td class="associated">
                          <v-avatar color="primary" class="mr-2 white--text" size="28">
                            <div class="font-weight-bold" :title="props.item.owner">
                              {{ $root.getAvatar(props.item.owner) }}
                            </div>
                          </v-avatar>
                          {{ props.item.owner }} 
                        </td>
                        <td class="associated">{{ props.item.updateTime | formatDateTime }}</td>
                        <td class="associated">
                          <v-icon v-if="props.item.kind == i18n.case">fa-briefcase</v-icon>
                          <v-icon v-if="props.item.kind == i18n.comments">fa-comments</v-icon>
                          <v-icon v-if="props.item.kind == i18n.attachments">fa-paperclip</v-icon>
                          <v-icon v-if="props.item.kind == i18n.evidence">fa-eye</v-icon>
                          <v-icon v-if="props.item.kind == i18n.events">fa-link</v-icon>
                          <span class="rounded ml-2">{{ props.item.kind }}</span>
                        </td>
                        <td class="associated">
                          <v-icon v-if="props.item.operation == i18n.create">fa-plus</v-icon>
                          <v-icon v-if="props.item.operation == i18n.delete">fa-trash</v-icon>
                          <v-icon v-if="props.item.operation == i18n.update">fa-pencil-alt</v-icon>
                          <span class="rounded ml-2">{{ props.item.operation }}</span>
                        </td>
                      </tr>
                    </template>
                    <template v-slot:expanded-item="props">
                      <tr>
                        <td colspan="5" class="case">
                          <div class="mt-2">
                            <v-row no-gutters class="py-1 case tabular-row">
                              <v-col cols="4"><span class="case tabular-label">{{ i18n.id }}:</span></v-col>
                              <v-col cols="8"><span class="case">{{ props.item.id }}</span></v-col>
                            </v-row>
                          </div>
                          <div>
                            <v-row no-gutters class="py-1 case tabular-row">
                              <v-col cols="4"><span class="case tabular-label">{{ i18n.kind }}:</span></v-col>
                              <v-col cols="8"><span class="case">{{ props.item.kind }}</span></v-col>
                            </v-row>
                          </div>
                          <div>
                            <v-row no-gutters class="py-1 case tabular-row">
                              <v-col cols="4"><span class="case tabular-label">{{ i18n.operation }}:</span></v-col>
                              <v-col cols="8"><span class="case">{{ props.item.operation }}</span></v-col>
                            </v-row>
                          </div>
                          <div>
                            <v-row no-gutters class="py-1 case tabular-row">
                              <v-col cols="4"><span class="case tabular-label">{{ i18n.dateCreated }}:</span></v-col>
                              <v-col cols="8"><span class="case">{{ props.item.createTime | formatDateTime }}</span></v-col>
                            </v-row>
                          </div>
                          <div>
                            <v-row no-gutters class="py-1 case tabular-row">
                              <v-col cols="4"><span class="case tabular-label">{{ i18n.dateModified }}:</span></v-col>
                              <v-col cols="8"><span class="case">{{ props.item.updateTime | formatDateTime }}</span></v-col>
                            </v-row>
                          </div>
                          <div v-if="props.item.kind == i18n.case">
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseTitle }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.title }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseDescription }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.description }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseAssignee }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.assignee }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseStatus }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.status }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseSeverity }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.severity }}</span></v-col>
                              </v-row>                                
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.casePriority }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.priority }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseTlp }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.tlp }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseCategory }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.category }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseTags }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.tags }}</span></v-col>
                              </v-row>
                            </div>
                          </div>
                          <div v-if="props.item.kind == i18n.comments">
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.commentDescription }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.description }}</span></v-col>
                              </v-row>
                            </div>
                          </div>
                          <div v-if="props.item.kind == i18n.events">
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.relatedEventId }}:</span></v-col>
                                <v-col cols="8"><span class="case value">
                                  <router-link v-if="props.item.fields.soc_id" class="no-underline" :to="{ name: 'hunt', query: {q: buildHuntQuery(props.item) }}">
                                    {{ props.item.fields.soc_id }}
                                  </router-link>
                                  <span v-if="!props.item.fields.soc_id">
                                    {{ i18n.caseEventIdAggregation }}
                                  </span>
                                </span></v-col>
                              </v-row>
                            </div>
                          </div>
                          <div v-if="props.item.kind == i18n.attachments">
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.artifactGroupType }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.groupType }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.artifactGroupId }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.groupId }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.filename }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.value }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.description }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.description }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseTlp }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.tlp }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseTags }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.tags }}</span></v-col>
                              </v-row>
                            </div>
                          </div>
                          <div v-if="props.item.kind == i18n.evidence">
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.artifactGroupType }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.groupType }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.artifactGroupId }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.groupId }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.artifactType }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.artifactType }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.value }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.value }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.description }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.description }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseTlp }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.tlp }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.artifactIoc }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.ioc }}</span></v-col>
                              </v-row>
                            </div>
                            <div>
                              <v-row no-gutters class="py-1 case tabular-row">
                                <v-col cols="4"><span class="case tabular-label">{{ i18n.caseTags }}:</span></v-col>
                                <v-col cols="8"><span class="case">{{ props.item.tags }}</span></v-col>
                              </v-row>
                            </div>
                          </div>

                          <div class="d-flex flex-column flex-sm-row align-end align-sm-center align-self-end text-body-2">
                            <v-spacer/>
                            <v-avatar color="primary" size="24" class="mr-2 d-none d-sm-inline-flex white--text">
                              <div class="case avatar-font" :title="props.item.owner">
                                {{ $root.getAvatar(props.item.owner) }}
                              </div>
                            </v-avatar>
                            <div class="mr-1">
                              {{ props.item.owner }}
                            </div>
                            <div class="mr-1 d-none d-sm-block">
                              &bull;
                            </div>
                            <div>
                              {{ props.item.updateTime | formatDateTime }}
                            </div>
                          </div>
                        </td>
                      </tr>
                    </template>
                    <template v-slot:no-results>
                      <v-alert :value="true" color="info" icon="fa-info">
                        {{ i18n.noSearchResults }}
                      </v-alert>
                    </template>
                  </v-data-table>
                  <div class="text-xs-center pt-2 d-none">
                      <v-btn v-text="i18n.loadMore" @click="loadAssociation('history')"></v-btn>
                  </div>
                </v-tab-item>
  
              <v-tabs>
            </v-row>
          </v-col>
          <v-col cols="12" md="3" order="1" order-md="2">
              <v-row no-gutters>
                <v-col class="d-flex flex-column justify-center text-truncate">

                    <v-expansion-panels multiple focusable v-model="expanded">
                      <v-expansion-panel>
                        <v-expansion-panel-header>
                          <h3>{{ i18n.summary }}</h3>
                        </v-expansion-panel-header>
                        <v-expansion-panel-content class="my-2">
                            <v-row>
                              <v-col cols="12">
                                <div tabindex="0" class="clicktoedit" @click="startEdit('case-assignee-input', caseObj.assigneeId, 'case-assignee', 'assigneeId', modifyCase)"
                                  @keypress.space.prevent="startEdit('case-assignee-input', caseObj.assigneeId, 'case-assignee', 'assigneeId', modifyCase)">
                                  <div class="font-weight-bold">{{i18n.caseAssignee}}: </div>
                                  <div id='case-assignee' class="case detail-field" v-if="!isEdit('case-assignee')">{{ withDefault(caseObj.assignee, i18n.unassigned) }}</div>
                                  <v-select id='case-assignee-input' v-if="isEdit('case-assignee')"
                                    dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseAssigneeHelp"
                                    v-model="editForm.val"
                                    :items="userList"
                                    item-text="email"
                                    item-value="id"
                                    v-on:change="stopEdit(true)"
                                  />
                                </div>
                              </v-col>
                            </v-row>
                            <v-row>
                              <v-col cols="12">
                                <div tabindex="0" class="clicktoedit" @click="startEdit('case-status-input', caseObj.status, 'case-status', 'status', modifyCase)"
                                  @keypress.space.prevent="startEdit('case-status-input', caseObj.status, 'case-status', 'status', modifyCase)">
                                  <div class="font-weight-bold">{{i18n.status}}: </div>
                                  <div id="case-status" class="case detail-field" v-if="!isEdit('case-status')">{{ withDefault(caseObj.status, i18n.unknown) }}</div>
                                  <v-select id="case-status-input" v-if="isEdit('case-status') && !isPresetCustomEnabled('status')"
                                    dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseStatusHelp"
                                    v-model="editForm.val"
                                    :items="selectList('status', caseObj.status)"
                                    v-on:change="stopEdit(true)"
                                  />
                                  <v-combobox id="case-status-input" v-if="isEdit('case-status') && isPresetCustomEnabled('status')"
                                    dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseStatusHelp"
                                    v-model="editForm.val"
                                    :items="selectList('status', caseObj.status)"
                                    v-on:change="stopEdit(true)"
                                  />
                                </div>
                              </v-col>
                            </v-row>
                        </v-expansion-panel-content>
                      </v-expansion-panel>

                      <v-expansion-panel>
                        <v-expansion-panel-header>
                          <h3>{{ i18n.details }}</h3>
                        </v-expansion-panel-header>
                        <v-expansion-panel-content class="my-2">

                            <v-row>
                              <v-col cols="12">
                                <div tabindex="0" class="clicktoedit" @click="startEdit('case-severity-input', caseObj.severity, 'case-severity', 'severity', modifyCase)"
                                  @keypress.space.prevent="startEdit('case-severity-input', caseObj.severity, 'case-severity', 'severity', modifyCase)">
                                  <div class="font-weight-bold">{{i18n.caseSeverity}}: </div>
                                  <div id="case-severity" class="case detail-field" v-if="!isEdit('case-severity')">{{ withDefault(caseObj.severity, i18n.unknown) }}</div>
                                </div>
                                <v-select id="case-severity-input" v-if="isEdit('case-severity') && !isPresetCustomEnabled('severity')"
                                  dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseSeverityHelp"
                                  v-model="editForm.val"
                                  :items="selectList('severity', caseObj.severity)"
                                  v-on:change="stopEdit(true)"
                                />
                                <v-combobox id="case-severity-input" v-if="isEdit('case-severity') && isPresetCustomEnabled('severity')"
                                  dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseSeverityHelp"
                                  v-model="editForm.val"
                                  :items="selectList('severity', caseObj.severity)"
                                  v-on:change="stopEdit(true)"
                                />
                              </v-col>
                            </v-row>
                            <v-row>
                              <v-col cols="12">
                                <div tabindex="0" class="clicktoedit" @click="startEdit('case-priority-input', caseObj.priority, 'case-priority', 'priority', modifyCase)"
                                  @keypress.space.prevent="startEdit('case-priority-input', caseObj.priority, 'case-priority', 'priority', modifyCase)">
                                  <div class="font-weight-bold">{{i18n.casePriority}}: </div>
                                  <div id="case-priority" class="case detail-field" v-if="!isEdit('case-priority')">{{ caseObj.priority }}</div>
                                </div>
                                <div v-if="isEdit('case-priority')">
                                  <v-form v-model="editForm.valid" @submit.prevent>
                                    <div class="mb-2">
                                      <v-text-field id="case-priority-input" outlined hide-details="auto" rows="3" dense no-resize v-model="editForm.val" :rules="[rules.number]" persistent-hint :hint="i18n.casePriorityHelp"/>
                                    </div>
                                  </v-form>
                                  <div class="d-inline-flex justify-end">
                                    <v-btn text small color="primary" class="align-self-end" @click="stopEdit()">
                                      {{ i18n.cancel }}
                                    </v-btn>
                                    <v-btn :disabled="!editForm.valid" text small color="primary" class="align-self-end" @click="stopEdit(true)">
                                      {{ i18n.save }}
                                    </v-btn>
                                  </div>
                                </div>
                              </v-col>
                            </v-row>
                            <v-row>
                              <v-col cols="12">
                                <div tabindex="0" class="clicktoedit" @click="startEdit('case-tlp-input', caseObj.tlp, 'case-tlp', 'tlp', modifyCase)"
                                  @keypress.space.prevent="startEdit('case-tlp-input', caseObj.tlp, 'case-tlp', 'tlp', modifyCase)">
                                  <div class="font-weight-bold">{{i18n.caseTlp}}: </div>
                                  <v-chip :color="colorizeChip(caseObj.tlp)" outlined id="case-tlp" v-if="!isEdit('case-tlp')">{{ withDefault(caseObj.tlp, i18n.unknown) }}</v-chip>
                                </div>
                                <v-select id="case-tlp-input" v-if="isEdit('case-tlp') && !isPresetCustomEnabled('tlp')"
                                  dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseTlpHelp"
                                  v-model="editForm.val"
                                  :items="selectList('tlp', caseObj.tlp)"
                                  v-on:change="stopEdit(true)"
                                  />
                                  <v-combobox id="case-tlp-input" v-if="isEdit('case-tlp') && isPresetCustomEnabled('tlp')"
                                    dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseTlpHelp"
                                    v-model="editForm.val"
                                    :items="selectList('tlp', caseObj.tlp)"
                                    v-on:change="stopEdit(true)"
                                  />
                                </v-select>
                              </v-col>
                            </v-row>
                            <v-row>
                              <v-col cols="12">
                                <div tabindex="0" class="clicktoedit" @click="startEdit('case-pap-input', caseObj.pap, 'case-pap', 'pap', modifyCase)"
                                  @keypress.space.prevent="startEdit('case-pap-input', caseObj.pap, 'case-pap', 'pap', modifyCase)">
                                  <div class="font-weight-bold">{{i18n.casePap}}: </div>
                                  <v-chip :color="colorizeChip(caseObj.pap)" outlined id="case-pap" v-if="!isEdit('case-pap')">{{ withDefault(caseObj.pap, i18n.unknown) }}</v-chip>
                                </div>
                                <v-select id="case-pap-input" v-if="isEdit('case-pap') && !isPresetCustomEnabled('pap')"
                                  dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.casePapHelp"
                                  v-model="editForm.val"
                                  :items="selectList('pap', caseObj.pap)"
                                  v-on:change="stopEdit(true)"
                                />
                                <v-combobox id="case-pap-input" v-if="isEdit('case-pap') && isPresetCustomEnabled('pap')"
                                  dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.casePapHelp"
                                  v-model="editForm.val"
                                  :items="selectList('pap', caseObj.pap)"
                                  v-on:change="stopEdit(true)"
                                />
                              </v-col>
                            </v-row>
                            <v-row>
                              <v-col cols="12">
                                <div tabindex="0" class="clicktoedit" @click="startEdit('case-category-input', caseObj.category, 'case-category', 'category', modifyCase)"
                                  @keypress.space.prevent="startEdit('case-category-input', caseObj.category, 'case-category', 'category', modifyCase)">
                                  <div class="font-weight-bold">{{i18n.caseCategory}}: </div>
                                  <div id="case-category" class="case detail-field" v-if="!isEdit('case-category')">{{ withDefault(caseObj.category, i18n.unknown) }}</div>
                                </div>
                                <v-select id="case-category-input" v-if="isEdit('case-category') && !isPresetCustomEnabled('category')"
                                  dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseCategoryHelp"
                                  v-model="editForm.val"
                                  :items="selectList('category', caseObj.category)"
                                  v-on:change="stopEdit(true)"
                                />
                                <v-combobox id="case-category-input" v-if="isEdit('case-category') && isPresetCustomEnabled('category')"
                                  dense eager outlined hide-details="auto" class="case-select" persistent-hint :hint="i18n.caseCategoryHelp"
                                  v-model="editForm.val"
                                  :items="selectList('category', caseObj.category)"
                                  v-on:change="stopEdit(true)"
                                />
                              </v-col>
                            </v-row>
                            <v-row>
                              <v-col cols="12">
                                <div tabindex="0" class="clicktoedit" @click="startEdit('case-tags-input', caseObj.tags, 'case-tags', 'tags', modifyCase)"
                                  @keypress.space.prevent="startEdit('case-tags-input', caseObj.tags, 'case-tags', 'tags', modifyCase)">
                                  <div class="font-weight-bold">{{i18n.caseTags}}: </div>
                                  <div id="case-tags" class="case detail-field mt-1" v-if="!isEdit('case-tags')">
                                    <v-chip class="mx-1" v-for="tag in caseObj.tags" color="primary">{{ tag }}</v-chip>
                                  </div>
                                </div>
                                <v-select id="case-tags-input" v-if="isEdit('case-tags') && !isPresetCustomEnabled('tags')"
                                  dense eager outlined hide-details="auto" class="case-select" multiple persistent-hint :hint="i18n.caseTagsHelp"
                                  v-model="editForm.val"
                                  :items="selectList('tags', caseObj.tags)"
                                  v-on:change="stopEdit(true)"
                                >
                                  <template #selection="{ item }">
                                    <v-chip color="primary">{{item}}</v-chip>
                                  </template>
                                </v-select>
                                <v-combobox id="case-tags-input" v-if="isEdit('case-tags') && isPresetCustomEnabled('tags')"
                                  dense eager outlined hide-details="auto" class="case-select" multiple persistent-hint :hint="i18n.caseTagsHelp"
                                  v-model="editForm.val"
                                  :items="selectList('tags', caseObj.tags)"
                                  v-on:change="stopEdit(true)"
                                >
                                  <template #selection="{ item }">
                                    <v-chip color="primary">{{item}}</v-chip>
                                  </template>
                                </v-combobox>
                              </v-col>
                            </v-row>
                        </v-expansion-panel-content>
                      </v-expansion-panel>
                    </v-expansion-panels>

                  <div class="ml-2 mt-2">
                    <div class="case summary">
                      <span class="case label">{{ i18n.caseId }}:</span>
                      <span class="case value">{{ caseObj.id }}</span>
                    </div>
                    <div class="case summary">
                      <span class="case label">{{ i18n.author }}:</span>
                      <span class="case value">{{ caseObj.owner }}</span>
                    </div>
                    <div class="case summary">
                      <span class="case label">{{ i18n.dateCreated }}:</span>
                      <span class="case value">{{ caseObj.createTime | formatDateTime}}</span>
                    </div>
                    <div class="case summary">
                      <span class="case label">{{ i18n.dateModified }}:</span>
                      <span class="case value">{{ caseObj.updateTime | formatDateTime}}</span>
                    </div>
                    <div class="case summary" v-if="$root.formatDateTime(caseObj.completeTime) !== ''">
                      <span class="case label">{{ i18n.dateClosed }}:</span>
                      <span class="case value">{{ caseObj.completeTime | formatDateTime}}</span>
                    </div>
                  </div>
                </v-col>
              </v-row>
          </v-col>
        </v-row>
      </v-container>
    </script>


    <script type="text/x-template" id="page-grid">
      <v-container fluid>
        <v-row>
          <v-col cols="9">
            <h2 v-text="i18n.grid"></h2>
          </v-col>
          <v-col cols="3" align="end">
            <h4 v-if="metricsEnabled">{{ i18n.gridEps }} {{ gridEps | formatCount }}</h4>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-data-table :search="gridFilter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" 
              :expanded.sync="expanded" :footer-props="footerProps" show-expand
              :items-per-page.sync="itemsPerPage" must-sort :headers="headers" :items="nodes">
              <template v-slot:top>
                <v-container fluid>
                  <v-row>
                    <v-col cols="6">
                    </v-col>
                    <v-col cols="6">
                      <v-text-field v-model="gridFilter" clearable prepend-icon="fa-filter" :label="i18n.filterResults" single-line hide-details></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>        
              </template>
              <template v-slot:item="props">
                <tr>
                  <td>
                    <v-btn id="expandNode" icon small @click="expand(props.item)">
                      <v-icon v-if="isExpanded(props.item)" :alt="i18n.expand" :title="i18n.nodeExpandHelp">fa-angle-down</v-icon>
                      <v-icon v-if="!isExpanded(props.item)" :alt="i18n.expand" :title="i18n.nodeExpandHelp">fa-angle-right</v-icon>
                    </v-btn>
                  </td>
                  <td v-text="props.item.id"></td>
                  <td v-text="$root.localizeMessage(props.item.role)"></td>
                  <td v-text="props.item.address"></td>
                  <td v-text="props.item.description"></td>
                  <td v-text="props.item.version"></td>
                  <td v-text="props.item.model"></td>
                  <td v-if="metricsEnabled">
                    <span v-if="props.item.metricsEnabled">{{ props.item.productionEps | formatCount }} / {{ props.item.consumptionEps | formatCount }}</span>
                    <span v-if="!props.item.metricsEnabled">{{ i18n.na }}</span>
                  </td>
                  <td>{{ props.item.updateTime | formatTimestamp }}</td>
                  <td>{{ props.item.epochTime | formatTimestamp }}</td>
                  <td>{{ props.item.uptimeSeconds | formatDuration }}</td>
                  <td><v-chip class="nodeStatus" @click="expand(props.item)" :color="props.item.status | colorNodeStatus">{{ $root.localizeMessage(props.item.status) }}</v-chip></td>
                </tr>
              </template>
              <template v-slot:expanded-item="{ item }">
                <tr>
                  <td :colspan="headers.length" class="px-0">
                    <v-container fluid grid-list-sm class="pa-4">
                      <v-row>
                        <v-col>
                          <img class="rounded-lg elevation-5" v-if="item.imageFront" :src="'images/appliances/' + item.imageFront">
                          <span v-if="!item.imageFront">{{ i18n.nodeImageUnavailable }}</span>
                        </v-col>
                        <v-col>
                          <img class="rounded-lg elevation-5" v-if="item.imageBack" :src="'images/appliances/' + item.imageBack">
                        </v-col>
                        <v-col>
                          <div>
                            <span class="filter label">{{ i18n.dateOnline }}</span>
                            <span class="filter value">{{ item.onlineTime | formatDateTime }}</span>
                          </div>
                          <div v-if="item.metricsEnabled">
                            <span class="filter label">{{ i18n.epsProduction }}</span>
                            <span class="filter value">{{ item.productionEps | formatCount }}</span>
                          </div>
                          <div v-if="item.metricsEnabled">
                            <span class="filter label">{{ i18n.epsConsumption }}</span>
                            <span class="filter value">{{ item.consumptionEps | formatCount }}</span>
                          </div>
                          <div v-if="item.metricsEnabled">
                            <span class="filter label">{{ i18n.nodeStatusProcess }}</span>
                            <span class="filter value">{{ $root.localizeMessage(item.processStatus) }}</span>
                          </div>
                          <div>
                            <span class="filter label">{{ i18n.nodeStatusConnection }}</span>
                            <span class="filter value">{{ $root.localizeMessage(item.connectionStatus) }}</span>
                          </div>
                          <div v-if="item.metricsEnabled">
                            <span class="filter label">{{ i18n.nodeStatusRaid }}</span>
                            <span class="filter value">{{ $root.localizeMessage(item.raidStatus) }}</span>
                          </div>
                        </v-col>
                      </v-row>
                    </v-container>
                  </td>
                </tr>
              </template>
            </v-data-table>
          </v-col>
        </v-row>
      </v-container>
    </script>

    <script type="text/x-template" id="page-settings">
      <v-container v-if="showSettingsForm" fluid>
        <v-row>
          <v-col>
            <h2 v-text="i18n.settingsTitle"></h2>
          </v-col>
        </v-row>
        <v-row>
          <v-col>
            <v-tabs grow>

              <v-tab id="userSettings_generalTab">
                <v-icon left>fa-cogs</v-icon>
                {{ i18n.settings }}
              </v-tab>
              <v-tab id="userSettings_profileTab">
                <v-icon left>fa-id-card</v-icon>
                {{ i18n.profile }}
              </v-tab>
              <v-tab id="userSettings_securityTab">
                <v-icon left>fa-key</v-icon>
                {{ i18n.security }}
              </v-tab>

              <v-tab-item>
                <v-card outlined class="my-4">
                  <v-card-title>{{ i18n.defaults }}</v-card-title>
                  <v-card-text>
                    <div v-text="i18n.resetDefaultsHint"></div>
                    <p/>
                    <v-btn id="settingsResetDefaults" color="primary" :disabled="usingDefaults" v-text="i18n.resetDefaults" @click="resetDefaults"></v-btn>
                  </v-card-text>
                </v-card>
              </v-tab-item>

              <v-tab-item>
                <v-alert class="mt-2" type="warning" icon="fa-key" text dense>
                  {{ i18n.profileInstructions }}
                </v-alert>
                <v-card outlined class="my-4">
                  <v-card-title>{{ i18n.profileDetails }}</v-card-title>
                  <v-card-text>
                    <v-form v-model="profileForm.valid" method="post" :action="authSettingsUrl">
                      <v-text-field name="traits.email" v-model="profileForm.email" :placeholder="i18n.email" :rules="[rules.required, rules.minemaillen]" class="d-none"></v-text-field>
                      <v-text-field name="traits.firstName" v-model="profileForm.firstName" :placeholder="i18n.firstName" type="text":rules="[rules.maxlen]"></v-text-field>
                      <v-text-field name="traits.lastName" v-model="profileForm.lastName" :placeholder="i18n.lastName" type="text" type="text":rules="[rules.maxlen]"></v-text-field>
                      <v-text-field name="traits.note" v-model="profileForm.note" :placeholder="i18n.note" type="text" type="text":rules="[rules.maxlen]"></v-text-field>
                      <v-text-field name="csrf_token" v-model="profileForm.csrfToken" class="d-none"></v-text-field>
                      <v-text-field name="method" value="profile" class="d-none"></v-text-field>
                      <v-btn id="settingsProfileChangeSubmit" type="submit" color="primary" :disabled="!profileForm.valid" v-text="i18n.save"></v-btn>
                    </v-form>
                  </v-card-text>
                </v-card>
              </v-tab-item>

              <v-tab-item>
                <v-alert class="mt-2" type="warning" icon="fa-key" text dense>
                  {{ i18n.securityInstructions }}
                </v-alert>
                <v-card outlined class="my-4">
                  <v-card-title>{{ i18n.password }}</v-card-title>
                  <v-card-text>
                    <v-form v-model="passwordForm.valid" method="post" :action="authSettingsUrl">
                      <div class="mb-4" v-text="i18n.passwordInstructions"></div>
                      <v-text-field name="password" v-model="passwordForm.password" :placeholder="i18n.passwordChange" :type="showPassword ? 'text' : 'password'" @click:append="showPassword = !showPassword" :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'" :rules="[rules.required, rules.minpasslen, rules.maxpasslen]"></v-text-field>
                      <v-text-field :placeholder="i18n.passwordConfirm" :type="showPassword ? 'text' : 'password'" @click:append="showPassword = !showPassword" :append-icon="showPassword ? 'fa-eye-slash' : 'fa-eye'" :rules="[rules.required, rules.maxpasslen, rules.matches]"></v-text-field>
                      <v-text-field name="csrf_token" v-model="passwordForm.csrfToken" class="d-none"></v-text-field>
                      <v-text-field name="method" value="password" class="d-none"></v-text-field>
                      <v-btn  id="settingsPasswordChangeSubmit" type="submit" color="primary" :disabled="!passwordForm.valid" v-text="i18n.save"></v-btn>
                    </v-form>
                  </v-card-text>
                </v-card>
                
                <v-card outlined class="my-4" v-if="totpForm.qr && totpForm.secret">
                  <v-alert type="error" border="bottom" colored-border text dense>
                    {{ i18n.securityInstructionsTotp }}
                  </v-alert>
                  <v-card-title>{{ i18n.totp }}</v-card-title>
                  <v-card-text>
                    <v-form v-model="totpForm.valid" method="post" :action="authSettingsUrl">
                      <div class="mb-4" v-text="i18n.totpQrInstructions"></div>
                      <v-img id="totp-qr" class="my-4" width="320" :src="totpForm.qr"></v-img>
                      <div id="totp-secret" v-text="i18n.totpSecretInstructions"></div>
                      <div class="my-4 mx-4">
                        {{ totpForm.secret }}
                        <v-icon class="ml-1" @click="$root.copyToClipboard(totpForm.secret)" :title="i18n.copyToClipboard">fa-copy</v-icon>
                      </div>
                      <v-text-field name="totp_code" autocomplete="off" v-model="totpForm.code" :placeholder="i18n.totpCodeHelp" type="text" :rules="[rules.required, rules.mintotplen, rules.maxtotplen]"></v-text-field>
                      <v-text-field name="csrf_token" v-model="totpForm.csrfToken" class="d-none"></v-text-field>
                      <v-text-field name="method" value="totp" class="d-none"></v-text-field>
                      <v-btn id="settingsTotpActivateSubmit" type="submit" color="primary" :disabled="!totpForm.valid" v-text="i18n.totpActivate"></v-btn>
                    </v-form>
                  </v-card-text>
                </v-card>

                <v-card outlined class="my-4" v-if="unlink_totp_available">
                  <v-card-title>{{ i18n.totp }}</v-card-title>
                  <v-card-text>
                    <v-form method="post" :action="authSettingsUrl">
                      <div class="mb-4" v-text="i18n.totpUnlinkInstructions"></div>
                      <v-text-field name="csrf_token" v-model="totpForm.csrfToken" class="d-none"></v-text-field>
                      <v-text-field name="totp_unlink" value="true" class="d-none"></v-text-field>
                      <v-btn id="settingsTotpDeactivateSubmit" type="submit" color="primary" v-text="i18n.totpDeactivate"></v-btn>
                    </v-form>
                  </v-card-text>
                </v-card>
              </v-tab-item>

            <v-tabs>
          </v-col>
        </v-row>
      </v-container>
    </script>

    <script src="js/external/jquery-3.6.4.min.js"></script>
    <script src="js/external/vue-2.7.14.min.js"></script>
    <script src="js/external/vue-router-3.5.2.min.js"></script>
    <script src="js/external/vuetify-v2.6.15.min.js"></script>
    <script src="js/external/axios-1.6.1.min.js"></script>
    <script src="js/external/moment-2.29.4.min.js"></script>
    <script src="js/external/moment-timezone-with-data-0.5.43.min.js"></script>
    <script src="js/external/chart-3.9.1.min.js"></script>
    <script src="js/external/vue-chartjs-3.5.1.min.js"></script>
    <script src="js/external/daterangepicker-3.14.1.min.js"></script>
    <script src="js/external/marked-4.3.0.min.js"></script>
    <script src="js/external/purify-3.0.2.min.js"></script>
    <script src="js/external/chartjs-chart-sankey-0.9.0.min.js"></script>
    <script src="js/external/chartjs-adapter-moment-1.0.0.min.js"></script>

    <script src="js/i18n.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/app.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/case.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/downloads.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/home.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/hunt.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/jobs.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/job.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/settings.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/grid.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/terms.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/user.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/routes/users.js?v=VERSION_PLACEHOLDER"></script>
    <script src="js/custom.js?v=VERSION_PLACEHOLDER"></script>
  </body>
</html>
